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>
相关推荐
excel4 分钟前
Vue SFC 编译全景总结:从源文件到运行时组件的完整链路
前端
excel5 分钟前
Vue SFC 编译核心解析(第 5 篇)——AST 遍历与声明解析:walkDeclaration 系列函数详解
前端
elvinnn7 分钟前
提升页面质感:CSS 重复格子背景的实用技巧
前端·css
excel7 分钟前
Vue SFC 编译核心解析(第 7 篇)——最终组件导出与运行时代码结构
前端
excel9 分钟前
Vue SFC 编译核心解析(第 6 篇)——代码生成与 SourceMap 合并:从编译结果到调试追踪
前端
rising start9 分钟前
五、CSS盒子模型(下)
前端·javascript·css
excel14 分钟前
Vue SFC 编译核心解析(第 3 篇)——绑定分析与作用域推断
前端
excel16 分钟前
Vue SFC 编译核心解析(第 4 篇)——普通 <script> 与 <script setup> 的合并逻辑
前端
excel16 分钟前
Vue SFC 编译核心解析(第 1 篇)——compileScript 总体流程概览
前端
excel17 分钟前
Vue 编译器中的 processAwait 实现深度解析
前端