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>
相关推荐
用户816869474725几秒前
React 如何用 MessageChannel 模拟 requestIdleCallback
前端·react.js
izx8881 分钟前
从 Buffer 到响应式流:Vue3 实现 AI 流式输出的完整实践
javascript·vue.js·人工智能
heyCHEEMS2 分钟前
手搓 uniapp vue3 虚拟列表遇到的坑
前端
Duck不必4 分钟前
紧急插播:CVSS 10.0 满分漏洞!你的 Next.js 项目可能正在裸奔
前端·next.js
+VX:Fegn08954 分钟前
计算机毕业设计|基于springboot + vue在线考试管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
幸运小圣4 分钟前
动态组件【vue3实战详解】
前端·javascript·vue.js·typescript
用户413079810614 分钟前
终于不漏了-Android开发内存泄漏详解
前端
孟祥_成都5 分钟前
nest.js / hono.js 一起学!hono的设计思想!
前端·node.js
努力glow .6 分钟前
彻底解决VMware下ROS2中gazebo启动失败的问题
前端·chrome
阿笑带你学前端7 分钟前
开源记账 App 一个月迭代:从 v1.11 到 v2.2,暗黑模式、标签系统、预算管理全面升级
前端