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 分钟前
现代 C++ 的炼金术:铸就高性能与高可维护性的工程实践
java·开发语言·前端·数据结构·c++
h***34633 分钟前
怎么下载安装yarn
android·前端·后端
拾忆,想起4 分钟前
Dubbo 监控数据采集全链路实战:构建微服务可观测性体系
前端·微服务·云原生·架构·dubbo
+VX:Fegn08959 分钟前
计算机毕业设计|基于springboot + vue服装商城系统(源码+数据库+文档)
数据库·vue.js·spring boot
JIngJaneIL11 分钟前
基于Java在线考试管理系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot
JIngJaneIL15 分钟前
基于Java音乐管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
软件技术NINI16 分钟前
前端面试题
前端
接着奏乐接着舞21 分钟前
react hooks
前端·javascript·react.js
踢球的打工仔21 分钟前
前端html(3)
前端·算法·html
IDOlaoluo21 分钟前
nginx-sticky怎么用 Nginx 负载均衡添加 sticky 模块完整步骤
前端·chrome