阅读 3791

vue cli 3 自动化导入less配置

像variable.less、mixin.less需要全局less文件使用,每次导入一次比较烦。

更简单的配置方法

  1. vue add style-resources-loader插件方式安装style-resources-loader。选择less
  2. 修改vue.config.js
    const path = require('path')
    const resolve = dir => {
      return path.join(__dirname, dir)
    }
    module.exports = {
        // ...
        pluginOptions: {
            'style-resources-loader': {
              preProcessor: 'less',
              patterns: [
                resolve('path/to/global.less')
              ]
            }
        }
    }
    复制代码

老的

参考vue cli 3 文档中的stylus设置全局导入

  1. npm i style-resources-loader -D
  2. 修改vue.config.js
// vue.config.js
const path = require('path')

module.exports = {
    chainWebpack: config => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
    },
    css: {
      loaderOptions: {
        less: {
          javascriptEnabled: true
        }
      }
    }
}

function addStyleResource(rule) {
    rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [
                path.resolve(__dirname, 'src/styles/variable.less'), // 需要全局导入的less
                path.resolve(__dirname, 'src/styles/mixin.less'),
            ],
        })
}
复制代码
  1. 重启项目
关注下面的标签,发现更多相似文章
评论