Vue 配置全局样式（style-resources-loader），学习指南

• 创建 vue.config.js，加入下面配置

const path = require(‘path’);

module.exports = {

// 安装 style-resources-loader 与 vue-cli-plugin-style-resources-loader

pluginOptions: {

‘style-resources-loader’: {

preProcessor: ‘less’,

// 这三种 patterns 写法都是可以的

// patterns: [“./src/assets/reset1.less”, “./src/assets/reset2.less”]

// patterns: “./src/assets/reset.less”

patterns: [

// 两种路径写法都可以，这里的路径不能使用 @ 符号，否则会报错

// path.resolve(__dirname, ‘./src/assets/reset.less’)

path.resolve(__dirname, ‘src/assets/reset.less’)

]

}

}

};

三、配置方式二

• 安装 style-resources-loader

$ npm i style-resources-loader

• 创建 vue.config.js，加入下面配置

module.exports = {

// 安装：style-resources-loader

chainWebpack: (config) => {

const oneOfsMap = config.module.rule(“less”).oneOfs.store;

oneOfsMap.forEach(item => {

item

.use(“style-resources-loader”)

.loader(“style-resources-loader”)

.options({

// 这里的路径不能使用 @ 符号，否则会报错

// patterns: [“./src/assets/reset1.less”, “./src/assets/reset2.less”]

patterns: “./src/assets/reset.less”

})

.end()

})

}

};

四、上面两种方式选一种

• 配置好之后，重新运行项目进行测试

DZM - Test