解决vue使用less全局变量

在vue中，可以通过以下方法，解决既可以在组件中使用全局变量，也可以在less文件中使用全局变量

　　已经安装less和less-loader的进行下面的操作，如果没有安装的就先安装这两个依赖

• 过渡3.0版本的vue-cil解决方案

1. 定义一个存放变量的less文件
2. 安装style-resources-loader，vue-cli-plugin-style-resources-loader
   

   npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

    

3. 在vue.config.js中，把变量的less文件配置进去
   

   const path = require('path') // 这个是需要的
   
   module.exports = {
     pluginOptions: {
       // 添加下面这段。src/style/globalValue.less为存放变量的路径＋文件
       'style-resources-loader': {
         preProcessor: 'less',
         patterns: [path.resolve(__dirname, "src/style/globalValue.less")]
       }
     }
   }

    

• 2.0版本的解决方案

1. 　　安装依赖sass-resources-loader
   

   npm i sass-resources-loader -D

2. 安装完sass-resources-loader后,咱们还需要简单配置下webpack
   
   1. 找到build/utils.js文件
   2. 在cssLoaders函数中添加使用全局less函数
      

      function lessResourceLoader() { // 增加全局使用less函数
          var loaders = [
            cssLoader,
            'less-loader',
            {
              loader: 'sass-resources-loader',
              options: {
                resources: [
                  path.resolve(__dirname, '../src/style/_color.less'), //定义全局变量的文件路径
                ]
              }
            }
          ];
          if (options.extract) {
            return ExtractTextPlugin.extract({
              use: loaders,
              fallback: 'vue-style-loader'
            })
          } else {
            return ['vue-style-loader'].concat(loaders)
          }
        }

   3. 在return中用lessResourceLoader() (代表的是你写函数所使用的名字,自己可以起任意名字) 替换之前less函数
      

      return {
          css: generateLoaders(),
          postcss: generateLoaders(),
          less: lessResourceLoader(), // 替换之后
          // less: generateLoaders('less'), // 原webpack配置的
          sass: generateLoaders('sass', { indentedSyntax: true }),
          scss: generateLoaders('sass'),
          stylus: generateLoaders('stylus'),
          styl: generateLoaders('stylus')
        }

       

   操作完后记得重启，还有就是文件里面最好只写变量和函数，不做实际样式操作

标签：generateLoaders,style,vue,less,loader,全局变量,resources
来源： https://www.cnblogs.com/GTbk/p/15411554.html