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>
相关推荐
eason_fan8 分钟前
前端避坑指南:一文吃透 npm 幽灵依赖(Phantom Dependency)
前端·前端工程化
前端小万9 分钟前
2026年3月面20个前端
前端
葡萄城技术团队28 分钟前
智慧表格(SpreadJS + AI):拥抱 Web 端对话式办公新时代
前端·人工智能
OpenTiny社区1 小时前
电商系统集成GenUI SDK实操指南
前端·开源·ai编程
A_nanda1 小时前
vue实现后端传输逐帧图像数据
前端·javascript·vue.js
YGY顾n凡1 小时前
我开源了一个项目:一句话创造一个AI世界!
前端·后端·aigc
qq_12084093711 小时前
Three.js 工程向:动画循环与时间步进稳定性实践
前端·javascript
旷世奇才李先生1 小时前
React18\+TypeScript实战: Hooks封装与企业级组件开发
前端·javascript·typescript
午安~婉1 小时前
Electron(续4)利用AI辅助完成配置功能
前端·javascript·electron·应用打包与发布
tERS ERTS2 小时前
头歌答案--爬虫实战
java·前端·爬虫