vue cli3如何引入全局less变量
最近在项目中需要写一个全局的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变量的更多相关文章
- vue vue-cli中引入全局less变量的方式
我们经常用less定义一些全局变量,比如主题的颜色,为了避免在每个组件中引用我首先尝试放在main.js中,发现并不起作用... 先看vue-cli2.x 版本如何解决 1.安装; npm insta ...
- Vue 中如何定义全局的变量和常量
Vue 中如何定义全局的变量和常量 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1:创建 global.js 并且在其中定义 let a = 10 ...
- vue中如何引入全局样式或方法
vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...
- vue按需引入/全局引入echarts
npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...
- 全局安装 Vue cli3 和 继续使用 Vue-cli2.x
官方链接:https://cli.vuejs.org/zh/guide/installation.html 1.安装Vue cli3 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @ ...
- vue/cli3引入cesium
vue/cli3引入cesium 一开始用了webpack结合vue引入vue:结果是各种bug,搞了半天.最后问了基友,发现vue脚手架这个·简单高效的方法,只需要几行代码就轻松地搞定啦! 方案一. ...
- vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
目录 1,前言 2,.env文件的作用 3,配置.env文件 4,配置启动命令 5,获取.env中的全局变量 5,实际用处 1,前言 分享一下vue项目中利用.env文件存储全局环境变量,以及利于项目 ...
- vue项目中全局配置变量
在项目中api管理需要用到全局变量,创建全局变量的方式也有很多. 1.通过export default const BASEURL = "http://localhost:3333/&quo ...
- [Vuejs] 在vue各个组件中应用全局scss变量
需要安装一个插件:sass-resources-loader 1.执行安装命令: npm i sass-resources-loader --save-dev 2.修改vue-cli环境下build文 ...
随机推荐
- Cesium加载倾斜摄影数据
(1)倾斜摄影数据仅支持 smart3d 格式的 osgb 组织方式, 数据目录必须有一个 “Data” 目录的总入口, “Data” 目录同级放置一个 metadata.xml 文件用来记录模型的位 ...
- 用 Python 了解一下最炫国漫《雾山五行》
看动漫的小伙伴应该知道最近出了一部神漫<雾山五行>,其以极具特色的水墨画风和超燃的打斗场面广受好评,首集播出不到 24 小时登顶 B 站热搜第一,豆瓣开分 9.5,火爆程度可见一斑,就打斗 ...
- 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 ...
- go微服务系列(一) go micro入门
1. 什么是go micro 1.1 go micro作用 1.2 go micro架构组成 2. go micro入门 3. 结合consul进行服务注册/发现 3.1 consul的安装 3.2 ...
- Java—io流之打印流、 commons-IO
打印流 打印流根据流的分类: 字节打印流 PrintStream 字符打印流 PrintWriter /* * 需求:把指定的数据,写入到printFile.txt文件中 * * 分析: * 1, ...
- C#LeetCode刷题-深度优先搜索
深度优先搜索篇 # 题名 刷题 通过率 难度 98 验证二叉搜索树 22.2% 中等 99 恢复二叉搜索树 45.1% 困难 100 相同的树 48.1% 简单 101 对称二叉树 4 ...
- C#LeetCode刷题-二分查找
二分查找篇 # 题名 刷题 通过率 难度 4 两个排序数组的中位数 C#LeetCode刷题之#4-两个排序数组的中位数(Median of Two Sorted Arrays)-该题未达最优解 30 ...
- LeetCode198 House Robber(打家劫舍)
题目 You are a professional robber planning to rob houses along a street. Each house has a certain amo ...
- 《T-GCN: A Temporal Graph Convolutional Network for Traffic Prediction》 代码解读
论文链接:https://arxiv.org/abs/1811.05320 博客原作者Missouter,博客链接https://www.cnblogs.com/missouter/,欢迎交流. 解读 ...
- C++ 不具有继承关系的类之间的显式,隐式转换 2013-07-11 15:41
好久没有写blog了,今天在学习c#的时候看到某一章节 讲类的隐式与显式转换.特此留笔,以供后续参考之用. 关于显式,隐式转换有些争论,说什么不建议隐式转换.但是个人认为非必要,如果有良好的基础书写基 ...