vue-cli4配置less全局变量
一、安装依赖
yarn add --dev less-loader less
yarn add --dev style-resources-loader
二、配置
在vue.config.js文件中添加:
const path = require('path') function resolve (dir) { return path.join(__dirname, dir) } module.exports = { pluginOptions: { // 第三方插件配置 'style-resources-loader': { preProcessor: 'less', patterns: [path.resolve(__dirname, 'src/assets/styles/variables.less')] // less所在文件路径 } } }
三、使用
在variables.less文件中声明变量:
@blue:#00f;
@red:#f00;
@green:#0f0;
在.vue文件中使用:
<style lang="less" scoped> .h2{ color: @red; // 声明的less样式变量 } </style>
注意:如果发现页面引入一直报错,说找不到、不存在或者定义无效等错误,那么还需要安装依赖:
yarn add --dev vue-cli-plugin-style-resources-loader
其实,正常情况下载安装依赖style-resources-loader时,会同时安装vue-cli-plugin-style-resources-loader,可能有其它不确定原因导致vue-cli-plugin-style-resources-loader安装失败,出错的话就需要手动安装了。
安装完成,重启服务即可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp
2018-10-19 FastJson 最佳实践