Vue Cli3.0 全局引入 less 变量

古城微笑少年丶 2022-12-20 01:57 161阅读 0赞

我们开发过程中经常会使用很多 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!

![e91bd9d1d253d613f9bd689d79de6bcb.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，这样所有样式都可以使用

[e91bd9d1d253d613f9bd689d79de6bcb.png]: /images/20221120/2b93c4c02786412f814b50f128d116f2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中Less设置全局变量

装依赖 npm install less --save-dev npm install sass-resources-loader --save-dev...

分手后的思念是犯贱/ 2024年04月17日 05:40/ 0 赞/ 64 阅读

相关 vue-cli4中全局引入jquery

先安装依赖 npm install jquery 在src同级目录下新建一个`vue.config.js`文件 ![在这里插入图片描述][watermark_t

墨蓝/ 2023年01月01日 07:52/ 0 赞/ 127 阅读

相关 vue-cli4中引入全局less变量的方式

1.安装 style-resources-loader npm i style-resources-loader --save-dev 2.安装vue-cli-p

ゝ一世哀愁。/ 2022年12月25日 04:54/ 0 赞/ 227 阅读

相关 Vue Cli3.0 全局引入 less 变量

我们开发过程中经常会使用很多 less 全局样式，但是 vue 文件中想使用 less 变量，就需要挨个引入，极其麻烦。现在我来揭秘： 1. 定义一个 themes.le

古城微笑少年丶/ 2022年12月20日 01:57/ 0 赞/ 162 阅读

相关 VUE cli3全局引入less文件

记录一下，使用`path.resolve`的方式引入没效果，使用如下的方式就有效果了在vue.config.js中添加 pluginOptions: {

我不是女神ヾ/ 2022年11月27日 06:50/ 0 赞/ 212 阅读

相关 vue引入全局静态变量_Vue-cli3配置全局环境变量

![88b0ea57f0f3ce2eb079ccfdf5251e5f.png][] 1.根目录下创建.env文件，里面可以用key=value的形式设置全局变量 ![087

- 日理万妓/ 2022年10月26日 14:10/ 0 赞/ 500 阅读

相关 vue中使用Less全局变量

1、安装` `sass-resources-loader，安装less npm install sass-resources-loader --sav

Love The Way You Lie/ 2022年05月20日 10:26/ 0 赞/ 372 阅读

相关 vue 使用less全局变量

我们经常用less定义一些全局变量，比如头部的高度，比如主题的颜色，比如侧边栏的宽度，这时我们定义less 全局文件是有必要的，那如何在vue中使用呢？我首先尝试着把co

向右看齐/ 2022年05月20日 03:50/ 0 赞/ 451 阅读

相关 Vue-Cli 3 引入 SCSS 全局变量

首先创建一个全局变量文件 `global.scss` $theme-color: efefef; 复制代码编辑`vue.config.js`

以你之姓@/ 2022年01月19日 00:21/ 0 赞/ 662 阅读

相关 vue引入全局过滤器，引入全局公共方法，引入全局变量

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

川长思鸟来/ 2021年11月16日 17:38/ 0 赞/ 675 阅读