最近在项目中需要写一个全局的style.less,然后在各组件中可以直接调用;

1、在assets下创建一个less文件;

2、安装style-resources-loader (npm i style-resources-loader --save-dev);

3、然后在vue.config.js里面配置一下

module.exports = {

   pluginOptions: {

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

   }

};

我以为这样就可以了,然后直接在组件中使用全局less的变量,然后报了undefined的错,上网查了一下还需要最后一步

4、安装vue-cli-plugin-style-resources-loader,然后就可以了。

(如果你用的是vuecli3,那么直接安装vue add style-resources-loader);这样会自动安装好plugin-style-resources-loader,就可以省去第四步了!!!!!!

vue cli3如何引入全局less变量的更多相关文章

  1. vue vue-cli中引入全局less变量的方式

    我们经常用less定义一些全局变量,比如主题的颜色,为了避免在每个组件中引用我首先尝试放在main.js中,发现并不起作用... 先看vue-cli2.x 版本如何解决 1.安装; npm insta ...

  2. Vue 中如何定义全局的变量和常量

    Vue 中如何定义全局的变量和常量 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1:创建 global.js 并且在其中定义   let a = 10 ...

  3. vue中如何引入全局样式或方法

    vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...

  4. vue按需引入/全局引入echarts

    npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...

  5. 全局安装 Vue cli3 和 继续使用 Vue-cli2.x

    官方链接:https://cli.vuejs.org/zh/guide/installation.html 1.安装Vue cli3 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @ ...

  6. vue/cli3引入cesium

    vue/cli3引入cesium 一开始用了webpack结合vue引入vue:结果是各种bug,搞了半天.最后问了基友,发现vue脚手架这个·简单高效的方法,只需要几行代码就轻松地搞定啦! 方案一. ...

  7. vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令

    目录 1,前言 2,.env文件的作用 3,配置.env文件 4,配置启动命令 5,获取.env中的全局变量 5,实际用处 1,前言 分享一下vue项目中利用.env文件存储全局环境变量,以及利于项目 ...

  8. vue项目中全局配置变量

    在项目中api管理需要用到全局变量,创建全局变量的方式也有很多. 1.通过export default const BASEURL = "http://localhost:3333/&quo ...

  9. [Vuejs] 在vue各个组件中应用全局scss变量

    需要安装一个插件:sass-resources-loader 1.执行安装命令: npm i sass-resources-loader --save-dev 2.修改vue-cli环境下build文 ...

随机推荐

  1. 每日一道 LeetCode (5):最长公共前缀

    前文合集 每日一道 LeetCode 前文合集 代码仓库 GitHub: https://github.com/meteor1993/LeetCode Gitee: https://gitee.com ...

  2. 用了Dapper之后通篇还是SqlConnection,真的看不下去了

    一:背景 1. 讲故事 前几天看公司一个新项目的底层使用了dapper,大家都知道dapper是一个非常强大的半自动化orm,帮程序员解决了繁琐的mapping问题,用起来非常爽,但我还是遇到了一件非 ...

  3. XCTF-WEB-高手进阶区-Web_python_template_injection-笔记

    Web_python_template_injection o(╥﹏╥)o从这里开始题目就变得有点诡谲了 网上搜索相关教程的确是一知半解,大概参考了如下和最后的WP: http://shaobaoba ...

  4. 关于手机数码圈KOL的一两点感想

    复工以来,高峰时段9号线地铁上的人依旧不少,安全距离啥的肯定是不用想了,只是从原来的4G手机换成5G手机以后在某些站能接收到5G信号,我终于能在一些原来根本没信号的站里愉快的刷一刷微博和酷安了. 但是 ...

  5. 2020-07-29:从 innodb 的索引结构分析,为什么索引的 key 长度不能太长?

    福哥答案2020-07-29: key 太长会导致一个页当中能够存放的 key 的数目变少,间接导致索引树的页数目变多,索引层次增加,从而影响整体查询变更的效率. 索引字段大小限制关于innodb_l ...

  6. C#LeetCode刷题之#720-词典中最长的单词(Longest Word in Dictionary)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4120 访问. 给出一个字符串数组words组成的一本英语词典.从 ...

  7. 简述python中`functools.wrapper()

    简述python中functools.wrapper() 首先对于最简单的函数: def a(): pass if __name__ == '__main__': print(a.__name__) ...

  8. 【SP2916】Can you answer these queries V - 线段树

    题面 You are given a sequence \(a_1,a_2,...,a_n\). (\(|A[i]| \leq 10000 , 1 \leq N \leq 10000\)). A qu ...

  9. linux上传下载小工具lrzsz

    工具压缩包链接 密码:zbef 1.将压缩包放到linux的任意目录下,执行:tar zxvf lrzsz-0.12.20.tar.gz 解压压缩包 2.cd lrzsz-0.12.20 3../co ...

  10. Android java.lang.SecurityException: Permission Denial

    报错: java.lang.SecurityException: Permission Denial: starting Intent { act=android.media.action.IMAGE ...