Vue项目全局使用less样式

1、npm安装less

npm install less less-loader --save

2、要想全局使用还需要安装sass-resources-loader

   npm i sass-resources-loader

3、安装完sass-resources-loader之后，还需要配置下webpack

   找到build/utils.js文件，在cssLoaders函数中添加使用全局less函数，复制以下代码进去

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

4、在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')
  }

5、已完成，重新运行就可以，在less文件里就可以写自己定义的全局样式了

@h: 100px;
@red: red;
@yellow: yellow;
@pink: pink;
@333: #333;