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>
相关推荐
酉鬼女又兒5 分钟前
零基础入门前端 第十三届蓝桥杯省赛 :水果拼盘 Flex一篇过(可用于备赛蓝桥杯Web应用开发)
前端·css·职场和发展·蓝桥杯·css3
weixin199701080169 分钟前
《苏宁商品详情页前端性能优化实战》
前端·性能优化
天若有情6739 分钟前
前端HTML精讲02:表单高阶用法+原生校验,告别冗余JS,提升开发效率
前端·javascript·html
蜡台10 分钟前
Vue 组件通信的 12 种解决方案
前端·javascript·vue.js·props
问道飞鱼15 分钟前
【前端知识】React Flow : 一个基于 React 的可视化节点编辑器框架
前端·ai工作流·react flow
qq_4061761418 分钟前
从零到一掌握 React 核心语法与规则:前端开发者必备指南
前端·react.js·前端框架
wefly20171 小时前
jsontop.cn:一站式 JSON 全能工具集,开发全流程效率神器
前端·javascript·python·django·json·json在线转换
XDHCOM2 小时前
Redis远程连接命令详解,分享高效配置与安全实践技巧
前端·redis·安全
YAY_tyy4 小时前
Vue3 + Three.js 实战:自定义 3D 模型加载与交互全流程
前端·javascript·vue.js·threejs