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

问题描述

这些是我使用的Sass模块的版本：

node-sass@^4

sass-loader@^7

我试图在vue.config.js文件中设置全局Sass变量：

module.exports = {
  css: {
    loaderOptions: {
      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

解决方法

您的project不是Vue CLI生成的项目，因此vue.config.js根本不会被处理。

在您的情况下，您需要在build/utils.js中配置Sass 7.x加载程序以通过data选项：

exports.cssLoaders = function (options) {
  //...

  return {
    //...
    sass: generateLoaders('sass',{ data: `$primaryColor: #16A085;` }),scss: generateLoaders('sass',}
}

但是，您应该注意sass-loader文档中的注释：

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

,

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

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

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