Vue Cli3.0 全局引入 less 变量

我们开发过程中经常会使用很多 less 变量,但是 vue 文件中想使用 less 变量,就需要挨个引入,极其麻烦。

现在我来揭秘:

1. 定义一个 themes.less 文件,将你想用的全局变量装入其中

@primary-color: #32b642; // 全局主色
@link-color: #32b642; // 链接色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45); // 次文本色
@disabled-color : rgba(0, 0, 0, .25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
@line: #e8e8e8; // 分割线颜色

2. 安装 style-resources-loader

vue add style-resources-loader

安装完成之后,命令行会让你选择预处理器,我们选择 less!


image.png

3. 将 themes.less 配置其中

上述安装完预处理器,会在项目的 vue.config.js 里面生成一段代码,我们只需要将 less 文件路径放入其中

pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, 'src/assets/css/index.less')]
    }
  }

我是将所有 less 全局样式统一引入到 index.less,这样所有样式都可以使用

web 前端群招人,有梦想的一群小青年 https://www.jianshu.com/p/33eee1c26b8a

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 4,463评论 2 16
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 383评论 0 1
  • 从V1迁移到V2由于使用的是webpack版本是2.2.1,所以针对原文做了一些修改。针对webpack2的修改部...
    yzc123446阅读 304评论 0 1
  • 什么是Webpack-----模块打包工具 WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找...
    Susie_53b5阅读 14评论 0 0
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 1,304评论 1 3