vue-cli配置scss全局變量

問題

在vue-cli項目中的assets文件下建立全局樣式表 global.scss ,在main.js中引入后可以直接引用樣式,但無法在 global.scss 中配置全局顏色變量

vue-cli在vue.config.js文件中配置scss全局變量

步驟

建立全局樣式表global.scss

在vue-cli項目中的assets文件下建立全局樣式表 global.scss ,用來保存全局樣式和全局樣式變量

創建vue.config.js

在項目根目錄中創建文件vue.config.js,並在其中配置scss:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        //依次導入的公用的scss變量，公用的scss混入，共用的默認樣式
        prependData: `@import "./src/assets/global.scss";`,
      },
    },
  },
}

重啟服務

然后重啟服務器 npm run serve (注意你一旦修改了 vue.config.js 文件 就要重啟服務器 因為你改了配置文件 它加載的是修改之前的)
之后我們設置全局顏色變量直接在 global.scss 文件中修改就可以了

最后

注意,配置中可能會碰到缺失 ; 錯誤,詳細則可參考此篇博客 vue sass配置全局變量報錯

所參考的原文獻的地址為：
vue腳手架在vue.config.js文件中配置scss全局變量