Vue | 使用less全局变量

vue-cli2配置

1. 安装sass-resources-loader

yarn add sass-resources-loader -D

2. 配置build/utils.js，找到exports.cssLoaders函数

3. 在//todo:此处添加方法处添加以下方法

function lessResourceLoader() {
  const loaders = [
    cssLoader,
    'less-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        resources: [
          // 这里配置定义less变量的地址
          path.resolve(__dirname, '../src/styles/variables.less'),
        ]
      }
    }
  ];
  if (options.extract) {
    return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader'
    })
  } else {
    return ['vue-style-loader'].concat(loaders)
  }
}

4. 更改exports.cssLoaders函数的return参数，将less: generateLoaders('less')改为 less: lessResourceLoader('less')，如下：

vue-cli3配置

1. 安装style-resources-loader

vue add style-resources-loader

2. 安装成功后，选择less

3. 会自动在vue.config.js文件中生成pluginOptions

pluginOptions: {
  'style-resources-loader': {
    preProcessor: 'less',
    patterns: []
  }
}

4. 添加less变量地址，如下：

pluginOptions: {
  'style-resources-loader': {
    preProcessor: 'less',
    patterns: [path.resolve(__dirname, 'src/styles/variables.less')]
  }
}