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安装失败,出错的话就需要手动安装了。

安装完成,重启服务即可。

posted @   寒爵  阅读(2537)  评论(1编辑  收藏  举报
编辑推荐:
· .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 最佳实践
点击右上角即可分享
微信分享提示