vue-cli4使用全局使用全局less文件中的变量配置操作文件中的变量配置操作
目录结构如下:目录结构如下:
需求:需求:
在Navgation.vue中使用global.less中的变量
vue-cli3的配置方法如下:传送门
vue-cli4的配置方法如下:的配置方法如下:
安装 style-resources-loader
npm i style-resources-loader -D
在 vue.config.js 中加上如下配置,没有则创建该文件,文件名不能改,如下:
// vue.config.js
const path = require('path')
module.exports = {
lintOnSave: false,
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/css/global.less这里写你的全局样式地址'),
],
})
}
补充知识:补充知识:vue项目中配置项目中配置LESS全局变量注入全局变量注入
在日常项目中,很多人都用到了css预处理器 ,如sass,less, stylus,处理样式非常方便,尤其是嵌套,变量,函数等,让
我们书写css非常nice,在项目中一般会建立一个样式文件夹(此处用less),存放公共样式和公共变量如项目主体色,字体
大小等等的变量,但是在项目中使用这些变量的时候通常都要在style标签内用@import ‘***/***/***/***.less’;这样的方式来导入
公共变量,页面一多,每个页面一般都需要引入就会感到很繁琐,所以此处就用到webpack的一些配置来达到全局注入,单个
文件不需要单独引入的目的。
此处说下自己用的之前的脚手架版本的配置此处说下自己用的之前的脚手架版本的配置
在build文件夹下的webpack.base.conf.js文件中修改,主要借助了sass-resources-loader。
配置的时候还需要在问价头部引入path,const path = require(‘path’)
然后在然后在module模块下进行配置模块下进行配置
评论0