Nuxt & SassError: Undefined variable

Question

嘿，我找不到解决我的错误的方法。

资产结构如下：

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

这是 _grid_variables.scss 文件：

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

这是 variables.scss 文件：

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

这是 package.json 文件的一部分：

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

*** 我尝试了不同版本的 node-sass 和 sass-loader:

node-sass@6.0.1 + sass-loader@10.2.0
node-sass@6.0.1 + sass-loader@8.0.2 ....和其他一些尝试

这是我的一部分 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) {}
  },

这里是我尝试使用变量的地方：

<style lang="scss" scoped>

...

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

我真的希望有人能帮助我摆脱这个错误。

Answer 1

我找到了错误的解决方案：

我在我的 nuxt.config.js 的 styleResources 中包含了 ./assets/scss/variables.scss，但我忘记了包含“@nuxtjs/style-resources”包（已正确安装）模块。

Nuxt & SassError: Undefined variable

Nuxt & SassError: Undefined variable

sass

nuxt.js

node-sass

sass-loader