vuecli3 全局设置less变量

1. 通过pluginOptions方式配置

//安装style-resources-loader
vue add style-resources-loader
//随后在vue.config.js中进行如下配置
//vue.config.js
const path = require('path');
module.exports = {
  pluginOptions: { // 第三方插件配置
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/style/imports.less')]
    }
}
function resolve(dir) {
    return path.join(__dirname, dir);
}

2. 通过chainWebpack配置

//先下载style-resources-loader包
npm install style-resources-loader --save-dev
//随后在vue.config.js中进行如下配置
//vue.config.js
module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/style/imports.less'),
      ],
    })
}
function resolve(dir) {
    return path.join(__dirname, dir);
}

3. 升级less-loader到6.0.0版本已上通过prependData进行配置

//升级less-loader
npm install less-loader@6.2.0 --save-dev
module.exports = {
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    javascriptEnabled: true,
                },
                prependData: `@import "~@/style/imports.less";`,
            }
        }
    },
}

个人推荐是第三种,类似sass,scss,stylus都支持这种方式进行设置

vuecli3 全局设置less变量

相关链接: