如何使用 Webpack 在 Vue 中設置全局 Sass 變量？

Question

這些是我使用的 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

Answer 1

您的項目不是Vue CLI生成的項目，因此根本不會處理vue.config.js 。

在您的情況下，您將在build/utils.js配置 Sass 7.x 加載build/utils.js以傳遞data選項：

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

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

但是，您應該注意sass-loader文檔中的注釋：

請注意：由於您正在注入代碼，這將破壞您的入口文件中的源映射。 通常有比這更簡單的解決方案，比如多個 Sass 入口文件。

Answer 2

我有同樣的問題，這是我的解決方案：

      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”中，所以基本上轉到頂部並找到文件夾 scss。