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 分钟前
git提交信息也能自动格式化了?committier快速体验
前端·javascript·代码规范
小高0075 分钟前
React 避坑指南:彻底搞定不必要的重新渲染
前端·javascript·react.js
浩浩酱9 分钟前
【TS】any的问题及与unknown的区别
前端·typescript
dagouaofei10 分钟前
手术室护理年终PPT怎么做?
前端·python·html·powerpoint
技术爬爬虾10 分钟前
为什么React的漏洞能攻破服务器?Next.js与RSC入门基础
前端·数据库·安全
JS_GGbond11 分钟前
浏览器三大核心API:LocalStorage、Fetch API、History API详解
前端·javascript
老前端的功夫13 分钟前
首屏优化深度解析:从加载性能到用户体验的全面优化
前端·javascript·vue.js·架构·前端框架·ux
申阳19 分钟前
Day 22:SpringBoot4 + Tauri 2.0(VUE) 登录功能前后端联调
前端·后端·程序员
晴殇i29 分钟前
性能飞跃!这几个现代浏览器API让页面加载速度提升至90+
前端·javascript·面试
孟祥_成都30 分钟前
nest.js / hono.js 一起学!开发前必备!
前端·node.js