Nuxt & SassError：未定义的变量

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
• 节点-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，但我忘记在模块。