Nuxt & SassError: Undefined variable

Question

Hei there, I cannot find the solution for my error.

Here is the assets structure:

-| assets
---| scss
-----| _grid_variables.scss
-----| ....
-----| variables.scss

Here is the _grid_variables.scss file:

$mobile-grid: 577px;
$tablet-grid: 768px;
$desktop-grid: 1024px;

Here is the variables.scss file:

@import "_colors_variables";
@import "_grid_variables";
@import "_fonts";
@import "_shadows";

Here is part of the package.json file:

{
  ...
  "devDependencies": {
    ...
    "node-sass": "^4.14.1",
    "nodemon": "^1.18.9",
    "sass": "^1.43.4",
    "sass-loader": "^8.0.2"
  }
}

*** I have tried diferent versions of node-sass and sass-loader:

• [email protected] + [email protected]
• [email protected] + [email protected] .... and some other tryings

Here is part of my nuxt.config.js:

  css: [
    '~assets/scss/main.scss'
  ],

  styleResources: {
    scss: ['./assets/scss/variables.scss']
  },

  build: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ],
    extend(config, ctx) {}
  },

And here is where I am trying to use the variable:

<style lang="scss" scoped>

...

@media screen and (max-width: $mobile-grid) {
  .description-row {
    text-align: center;
  }
}
</style>

I really hope someone can help me to get out from this error.

Answer 1

I've found the solution for my Error:

I was including ./assets/scss/variables.scss in the styleResources in my nuxt.config.js, but I was forgetting to include the '@nuxtjs/style-resources' package (which was correctly installed) in the modules.