vue.config.js中配置全局less样式,不需要在每一个vue组件中都引入该公共样式
在做vue项目的时候,有时候需要用到一些公共的less样式,这时候全局配置好过局部配置,在全局配置的时候,试过直接在main.js引入less的公共文件;也试过在vue.config.js文件中配置css属性:但是上面这两种方式都报错,直到尝试了以下方法:const path = require(‘path’)module.exports = {chainWebpack: config =>
在做vue项目的时候,有时候需要用到一些公共的less样式,这时候全局配置好过局部配置,在全局配置的时候,试过直接在main.js引入less的公共文件;
也试过在vue.config.js文件中配置css属性:
但是上面这两种方式都报错,直到尝试了以下方法:
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)))
}
}function addStyleResource(rule) { rule.use(‘style-resource’)
.loader(‘style-resources-loader’) .options({ patterns: [
path.resolve(__dirname, ‘./src/assets/less/public.less’), // 需要全局导入的less ], }) }
这种方法是可以实现全局配置的。
更多推荐
所有评论(0)