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>
相关推荐
C_心欲无痕4 分钟前
vue3 - shallowReadonly浅层只读响应式对象
前端·javascript·vue.js
_Kayo_5 分钟前
HTML 拖放API
前端·javascript·html
狗头大军之江苏分军6 分钟前
2026年了,前端到底算不算“夕阳行业”?
前端·javascript·后端
幼儿园技术家10 分钟前
从 jQuery → V/R → Lit:前端架构的 15 年轮回
前端
沛沛老爹13 分钟前
Web开发者快速上手Advanced RAG:索引优化原理与实践
前端·数据库·advanced rag·深度优化·web转型ai
跟着珅聪学java13 分钟前
Vue 和 React 优缺点
前端·javascript·vue.js
哟哟耶耶26 分钟前
component-svg圆环进度百分比图(顶部文本,中间图形,底部文本)
前端·css·echarts
不想秃头的程序员29 分钟前
Vue3 中的 <keep-alive> 详解
前端·vue.js
其尔Leo30 分钟前
Vue3可动态添加行el-table组件
前端
紫小米30 分钟前
webpack详解和实操
前端·webpack·node.js