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>
相关推荐
衫水几秒前
如何在离线情况下部署项目(前端VUE + 后端Python)
前端·vue.js·python
南棱笑笑生几秒前
20260123让天启AIO-3576Q38开发板在天启Buildroot下适配摄像头模块8ms1m【预览】
java·前端·数据库·rockchip
Sylvia33.2 分钟前
如何获取足球数据统计数据API
java·前端·python·websocket·数据挖掘
沛沛老爹4 分钟前
从Web到AI:Agent Skills安全架构实战——权限控制与数据保护的Java+Vue全栈方案
java·开发语言·前端·人工智能·llm·安全架构·rag
小飞大王6669 分钟前
使用nodejs接入ai服务并使用sse技术处理流式输出实现打字机效果
前端·javascript·人工智能
极客小云12 分钟前
【React + TypeScript 实现高性能多列多选组件】
前端·react.js·typescript
bin915316 分钟前
(文后附完整代码)html+css+javascript 弹球射击游戏项目分析
前端·javascript·css·游戏·html·前端开发
qq_4595586918 分钟前
使用DrissionPage打开Edge
前端·edge
二哈喇子!8 小时前
BOM模型
开发语言·前端·javascript·bom
二哈喇子!8 小时前
Vue2 监听器 watcher
前端·javascript·vue.js