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>
相关推荐
小奶包他干奶奶18 小时前
将svg对象化,并动态修改svg图标的颜色、尺寸等
前端·html
Lee川18 小时前
React 快速入门:Vue 开发者指南
前端·vue.js·react.js
用户61581396951619 小时前
Elpis: 基于vue3+webpack5+nodejs搭建一个完整项目
前端
90后的晨仔19 小时前
S C:\WINDOWS\system32> pnpm i -g openclaw@latest pnpm : 无法加载文件 C:\xx\A
前端
蜡台19 小时前
Node 版本管理器NVM 安装配置和使用
前端·javascript·vue.js·node·nvm
狂奔蜗牛飙车19 小时前
Day3:HTML5 基础标签:h1-h6、p、hr、br、a、img
前端·html·html5·html常用标签的使用方法
木斯佳19 小时前
前端八股文面经大全:腾讯前端暑期提前批一、二、三面面经(下)(2026-03-04)·面经深度解析
前端
bluceli19 小时前
前端国际化(i18n)实战指南:构建多语言应用的完整方案
前端
hh随便起个名20 小时前
React组件通信
前端·react.js·前端框架
前端 贾公子20 小时前
vite-plugin-eruda-pro 在vite中使用eruda
前端