最近在项目中需要写一个全局的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. Cesium加载倾斜摄影数据

    (1)倾斜摄影数据仅支持 smart3d 格式的 osgb 组织方式, 数据目录必须有一个 “Data” 目录的总入口, “Data” 目录同级放置一个 metadata.xml 文件用来记录模型的位 ...

  2. 用 Python 了解一下最炫国漫《雾山五行》

    看动漫的小伙伴应该知道最近出了一部神漫<雾山五行>,其以极具特色的水墨画风和超燃的打斗场面广受好评,首集播出不到 24 小时登顶 B 站热搜第一,豆瓣开分 9.5,火爆程度可见一斑,就打斗 ...

  3. sockjs.js?9be2:1606 GET http://192.168.1.101:8080/sockjs-node/info?t=1583642185049 net::ERR_CONNECTION_TIMED_OUT错误连接方式解决方法

    在使用vue-cli脚手架创建项目的时候,在cnpm create app命令后,项目创建成功后通过npm run serve命令运行以后,控制台报错,sockjs.js?9be2:1606 GET ...

  4. go微服务系列(一) go micro入门

    1. 什么是go micro 1.1 go micro作用 1.2 go micro架构组成 2. go micro入门 3. 结合consul进行服务注册/发现 3.1 consul的安装 3.2 ...

  5. Java—io流之打印流、 commons-IO

    打印流 打印流根据流的分类: 字节打印流  PrintStream 字符打印流  PrintWriter /* * 需求:把指定的数据,写入到printFile.txt文件中 * * 分析: * 1, ...

  6. C#LeetCode刷题-深度优先搜索

    深度优先搜索篇 # 题名 刷题 通过率 难度 98 验证二叉搜索树   22.2% 中等 99 恢复二叉搜索树   45.1% 困难 100 相同的树   48.1% 简单 101 对称二叉树   4 ...

  7. C#LeetCode刷题-二分查找​​​​​​​

    二分查找篇 # 题名 刷题 通过率 难度 4 两个排序数组的中位数 C#LeetCode刷题之#4-两个排序数组的中位数(Median of Two Sorted Arrays)-该题未达最优解 30 ...

  8. LeetCode198 House Robber(打家劫舍)

    题目 You are a professional robber planning to rob houses along a street. Each house has a certain amo ...

  9. 《T-GCN: A Temporal Graph Convolutional Network for Traffic Prediction》 代码解读

    论文链接:https://arxiv.org/abs/1811.05320 博客原作者Missouter,博客链接https://www.cnblogs.com/missouter/,欢迎交流. 解读 ...

  10. C++ 不具有继承关系的类之间的显式,隐式转换 2013-07-11 15:41

    好久没有写blog了,今天在学习c#的时候看到某一章节 讲类的隐式与显式转换.特此留笔,以供后续参考之用. 关于显式,隐式转换有些争论,说什么不建议隐式转换.但是个人认为非必要,如果有良好的基础书写基 ...