标签：scss vue sass less loader cli3.0 cli2.0 resources

以前懒，没怎么管这个变量的问题，直到后来写后台管理系统，界面其实是比较简洁的，用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。