vue设置全局样式变量 vule-cli 2.x和vule-cli 3.x及以上

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-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";'
      }
    }
  },

 

配置完之后就可以在scss文件上写全局的css变量

例如：$font-color: #000;

然后在需要应用的地方直接引用变量即可~