vue+less+style-resources-loader 配置全局颜色变量

全局统一样式后,可配置vue.config.js实现全局颜色变量,方便在编写时使用统一风格的色彩

一、新建global.less

二、下载安装style-resources-loader

javascript 复制代码
npm i style-resources-loader --save-dev

三、在vue.config.js中进行配置

javascript 复制代码
module.exports = {
	 pluginOptions: {
	    'style-resources-loader': {
	      preProcessor: 'less',
	      patterns: [resolve('src/assets/css/global.less')]
	    }
	  },
}

四、在vue文件中使用

javascript 复制代码
<style lang="less">
.test{
    color:@theme-color;
}
</style>
相关推荐
Data analyse45634 分钟前
Cookie过期引发UV上涨的复核方法
服务器·前端·数据分析·uv
Highcharts.js36 分钟前
图表开发实战总结| 7 条“黄金法则”与“性能铁律”
前端·javascript·vue.js·编辑器·时序数据库·highcharts
Helix25037 分钟前
Electron、WebView 框架与 HTA 对比:桌面应用选型、安全性与现代替代方案
前端·javascript·electron·webview·vbscript·hta·本地html应用
开开心心就好1 小时前
办公软件卸载不干净?专用工具一键清残留
java·前端·人工智能·智能手机·kafka·excel·memcache
静默回滚1 小时前
图片能显示,画进canvas却空白:像素面积上限
前端
补码缩写1 小时前
canvas大图内存怎么算:宽×高×4只是第一份
前端
coding漫漫长路1 小时前
img.decode()报错的图能画,load成功的却是空的
前端
不可能片场1 小时前
AI视频首尾帧控制 用参考图定住镜头
前端·electron
修炼的dance1 小时前
canvas最大能开多大:先看面积,再看导出格式
前端
薛一半2 小时前
React-Redux核心原理与容器组件实战
前端·javascript·react.js