vue实现引用less，sass全局变量

1、npm install sass-resources-loader --save-dev；

2、build/utils.js中，修改

function resolveResource(name) {
      return path.resolve(__dirname, '../src/assets/css/' + name);
  }
  function generateSassResourceLoader() {
      var loaders = [
        cssLoader, 
        // 'postcss-loader',
        'less-loader',
        {
            loader: 'sass-resources-loader',
            options: {
              // it need a absolute path
              resources: [resolveResource('basic.less')]
            }
        }
      ];
      if (options.extract) {
        return ExtractTextPlugin.extract({
          use: loaders,
          fallback: 'vue-style-loader'
        })
      } else {
        return ['vue-style-loader'].concat(loaders)
      }
  }

其中resolveResource中的‘../src/assets/css’换成自己的less/sass文件的路径，generateSassResourceLoader中

resources:[resolveResource('basic.less')]的basic.less换成自己的less/sass文件名；（注意：如果是sass，则

var loaders = [
        cssLoader, 
        // 'postcss-loader',
        'less-loader',  
        {
            loader: 'sass-resources-loader',
            options: {
              // it need a absolute path
              resources: [resolveResource('basic.less')]
            }
        }
      ];

　中的‘less-loader’需要改为 'sass-loader'）;

3、build/utils.js中，把

less: generateLoaders('less') 替换成 less: generateSassResourceLoaer()

参考： https://blog.csdn.net/u014292161/article/details/79193381

转载于:https://www.cnblogs.com/ToBeBest/p/9675479.html