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>
相关推荐
百锦再2 分钟前
使用JavaScript获取和解析页面内容的完整指南
开发语言·前端·javascript·python·flask·fastapi
sakana5 分钟前
如何写一个自己的skill
前端·人工智能
wsdswzj9 分钟前
web前端基础知识
前端
一条小鲨鱼31 分钟前
所遇到的响应式问题
前端·vue.js
Ruihong32 分钟前
你的 Vue v-for,VuReact 会编译成什么样的 React 代码?
vue.js·react.js·面试
M ? A33 分钟前
你的 Vue 路由,VuReact 会编译成什么样的 React 路由?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
L.Cheng35 分钟前
谷歌浏览器如何禁用自动更新_Chrome关闭后台升级程序
前端·chrome
donecoding41 分钟前
类型与语法的“直觉对齐”:TS 切入的 Go 语言初体验
前端·typescript·go
web守墓人42 分钟前
【linux】Mubuntu v1.0.7发布:支持codex cli完整运行
前端·codex
WYiQIU42 分钟前
宇树科技Web前端岗(AI方向),这不算泄题吧......
前端·vue.js·人工智能·笔记·科技·面试·职场和发展