Nuxt & SassError：未定义的变量

Posted 2023-02-22

【中文标题】Nuxt & SassError：未定义的变量

【英文标题】：Nuxt & SassError: Undefined variable

【发布时间】：2021-12-19 11:21:32

【问题描述】：

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

这是资产结构：

-| 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>

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

【参考方案1】：

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

我在 nuxt.config.js 的 styleResources 中包含 ./assets/scss/variables.scss，但我忘记在模块。