我是靠谱客的博主 老实棒棒糖,最近开发中收集的这篇文章主要介绍vue-cli3/4引入less全局变量,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

1.安装依赖:

vue add style-resources-loader

2.选择对应的css预处理语言,可选值有scss,sass,stylus,,less,选择less即可

3.安装完成之后会提醒你在vue.config.js配置全局变量文件地址:One more step, add patterns for your resources's files in vue.config.js

然后在项目中src/assets新建一个common.less文件,并在vue.config.js配置文件地址

const path = require("path");//文件头部引入path

module.exports = {
  ...... //其他配置

  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/common.less')  // 变量文件位置
      ]
    }
  }
}

4.在项目中使用common.less中的全局变量

common.less中配置  @mc:#409EFF;

demo.vue中就可以使用  .topTitle{color:@mc}

 

附:若想修改主题色,可以使用vuex配置全局变量,然后通过绑定属性:style="{color:$store.state.mainColor}"设置对应的样式

最后

以上就是老实棒棒糖为你收集整理的vue-cli3/4引入less全局变量的全部内容,希望文章能够帮你解决vue-cli3/4引入less全局变量所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(70)

评论列表共有 0 条评论

立即
投稿
返回
顶部