解决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')
        }

       

    操作完后记得重启,还有就是文件里面最好只写变量和函数,不做实际样式操作
上一篇:webpack拆分css并以link导入


下一篇:svg-icon的工作原理(超详细)