vue-cli2.0和vue-cli3.0及以上配置全局css變量

以前懶，沒怎么管這個變量的問題，直到后來寫后台管理系統，界面其實是比較簡潔的，用vue+element 就可以搞定，但是常常遇到UI在迭代版本的時候更改主題色的問題，既然這樣，那就還是要用起來這個全局變量。

我個人對於這個功能的看法就是方便切換主題，哈哈哈。

對於vule-cli 2.x，如下操作：

1.

npm i @babel/core -D

2.

npm i sass-resources-loader

3.找到 build/utils.js，將 scss: generateLoaders('sass')，修改為如下：

scss: generateLoaders('sass')
    .concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/styles/varibles.scss') //這里是單獨建的存放變量的scss
        }
      }
    ),

然后就可以在任意的vue文件里的style里使用變量啦！

在vue-cli 3.x以及現在的vue/cli 4.x如下使用：

1.安裝  style-resources-loader

less 還需要安裝 less-vars-to-js

2.在vue.config.js里加上：

const theme = lessToJs(

  fs.readFileSync(

    path.join(__dirname, './src/assets/less/var.less'),

    'utf8'

  )

)

//這里展示了less和scss的方法


css: {
    loaderOptions: {
      less: {
        modifyVars: theme,
        javascriptEnabled: true
      },
      scss: {
        prependData: '@import "~@/assets/sass/var.scss";'
      }
    }
  },

然后就可以直接用了