首页 > 其他 > 详细

vue-cli3全局使用less变量(亲测有效)

时间:2020-05-09 19:29:08      阅读:755      评论:0      收藏:0      [点我收藏+]

问题: 在global.less文件中定义一些全局使用的less变量;

结果组件使用这些全局变量时,都要@import "~@/styles/global.less"引入该文件,否则报错

解决方法和步骤

1. 安装style-resources-loader

yarn add style-resources-loader

2. 在vue.config.js中进行配置

module.exports = {
···

	// 引入全局样式,这样使用定义的less变量时,不用每次引入global.less了
    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/styles/global.less‘), // 需要全局导入的less
			],
		})
}

vue-cli3全局使用less变量(亲测有效)

原文:https://www.cnblogs.com/XHappyness/p/12859422.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!