Javascript 如何使用Webpack在Vue中设置全局Sass变量？

以下是我使用的Sass模块的版本：

node-sass@^4

sass-loader@^7

我试图在

vue.config.js

文件中设置一个全局Sass变量：

module.exports={
css:{
装载机选项：{
sass：{
prependData:`$primaryColor:#16A085`
}
}
}
}

但是在运行

npm run dev

之后，我得到以下错误：

Module build failed:
     color: $primaryColor;
           ^
      Undefined variable: "$primaryColor".
      in C:\Users\tomek\Desktop\projekty\projectsBacketlist\noteTakingApp\frontend\noteTakkingApp\src\views\NoteEdit.vue (line 157, column 13)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-b5e02554","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/NoteEdit.vue 4:14-374 13:3-17:5 14:22-382
 @ ./src/views/NoteEdit.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

您的项目不是生成的项目，因此根本不会处理

vue.config.js

在您的情况下，您需要配置Sass 7.x加载程序以传递选项：

exports.cssLoaders=函数（选项）{
//...
返回{
//...
sass:generateLoaders（'sass'，{数据：`$primaryColor:#16A085；`}），
scss:generateLoaders（'sass'，{数据：`$primaryColor:#16A085；`}），
}
}

但是，您应该注意

sass加载程序

文档中的注释：

请注意：由于您正在注入代码，这将破坏输入文件中的源映射。通常有比这更简单的解决方案，比如多个Sass条目文件

---

我也有同样的问题，这是我的解决方案：

      return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    // scss: generateLoaders('sass'),
    scss: generateLoaders('sass', { data: `@import '@/scss/_variables.scss';` }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

---

我的文件在“src”中，所以基本上转到顶部，找到文件夹scs。

请检查并重新格式化代码