其他分享
首页 > 其他分享> > vue-cli2.0和vue-cli3.0及以上配置全局css变量

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

然后就可以直接用了

标签:scss,vue,sass,less,loader,cli3.0,cli2.0,resources
来源: https://www.cnblogs.com/liuqin-always/p/13903211.html