欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vuecli3 配置全局less文件

程序员文章站 2022-06-13 16:05:40
...
  1. 第一种配置方式
npm install style-resources-loader vue-cli-plugin-style-resources-loader less-loader less -S
// vue.config.js文件中的配置
const path = require('path');
module.exports = {
pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/common/global.less')
      ]
    }
  }
}
  1. 第二种配置方式
npm i style-resources-loader -D
// 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)))
    }
}
 
// add style resource
function addStyleResource(rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [path.resolve(__dirname, "./src/assets/common/global.less")]
    })
}