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>
相关推荐
SuperEugene1 分钟前
接口类型管理:从 any 到有组织的 api.d.ts
前端·面试·typescript
喝咖啡的女孩1 分钟前
React Hook & Class
前端
小呆呆_小乌龟2 分钟前
同样是定义对象,为什么 TS 里有人用 interface,有人用 type?
前端·react.js
Forever7_2 分钟前
仅用一个技巧,让 JavaScript 性能提速 500%!
前端·vue.js
慢慢长大的孩子7 分钟前
个人运营小网站的最佳策略
前端·后端
牛奶25 分钟前
ts随笔:基础与类型系统
前端·面试·typescript
牛奶38 分钟前
JS随笔:浏览器 API(DOM 与 BOM)
前端·javascript·面试
用泥种荷花1 小时前
【LangChain.js学习】 会话记忆(临时/长期)全解析
前端
慢慢长大的孩子1 小时前
原生Android开发与JS桥开发对比分析
前端·后端
爱勇宝1 小时前
2026年前端生存规划:只会写页面的人,正在被悄悄淘汰
前端·后端·架构