VUE中的組件如何使用公共scss參數

安裝scss

npm install scss scss-loader --save

新建公共scss文件

在mixin.scss中定義公共參數 

$acolor: #45b984;

在vue.config.js中進行配置

官方文檔：

module.exports = {
    publicPath: './',
    css: {
        loaderOptions: {
          // 給 sass-loader 傳遞選項
          sass: {
            // @/ 是 src/ 的別名
            // 所以這裏假設你有 `src/variables.sass` 這個文件
            // 注意：在 sass-loader v7 中，這個選項名是 "data"
            prependData: `@import "~@/variables.sass"`
          },
          // 默認情況下 `sass` 選項會同時對 `sass` 和 `scss` 語法同時生效
          // 因爲 `scss` 語法在內部也是由 sass-loader 處理的
          // 但是在配置 `data` 選項的時候
          // `scss` 語法會要求語句結尾必須有分號，`sass` 則要求必須沒有分號
          // 在這種情況下，我們可以使用 `scss` 選項，對 `scss` 語法進行單獨配置
          scss: {
            prependData: `@import "~@/assets/css/mixin.scss";`
          },
          // 給 less-loader 傳遞 Less.js 相關選項
          less:{
            // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
            // `primary` is global variables fields name
            globalVars: {
              primary: '#fff'
            }
          }
        }
      }
}

然後在任意地方的組件中都可以直接使用mixin.scss中定義的參數