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文 ...
随机推荐
- P2569 [SCOI2010]股票交易 dp 单调队列优化
LINK:股票交易 题目确实不算难 但是坑点挺多 关于初值的处理问题我就wa了两次. 所以来谢罪. 由于在手中的邮票的数量存在限制 且每次买入卖出也有限制. 必然要多开一维来存每天的邮票数量. 那么容 ...
- odoo12的视图常见属性和操作
1.菜单视图属性: 常用属性: name是展示在用户界面中的菜单项标题 action是点击菜单项时运行的窗口操作的XML ID parent是父级菜单项的XML ID.本例中父级项由其它模块创建,因此 ...
- 【HNOI2011】数学作业 题解(递推+矩阵快速幂)
题目链接 题目大意:求$1-n$所拼接起来的数$mod\ m$的值. ----------------------------------- 递推式子很好想:$f_i=f_{i-1}*10^{\lg ...
- 网络安全传输系统-sprint3账号管理子系统设计
part1:sqlite嵌入式数据库移植 1.数据库系统构成:访问数据库应用-->管理数据库系统-->数据库存储(自上而下) 2.数据库中数据以表的形式而存在.表与表之间可能存在关联关系( ...
- Android SQLite轻量级数据库(简单介绍)
SQLite它是相当于嵌入到安卓里的一个小数据库吧, 它也可以使用SQL语句进行数据库的增删改查操作,但是是SQL1992的语句. 然后SQLite也有自己的语句,但是学过SQL的应该都会发现,它比较 ...
- Linux学习笔记之如何设置vim中的格式如行号等
在我们编写代码程序时,我们时常想追求更好的格式,下面写一下我认为挺实用的格式命令以及如何更改 如果我们打开vim在其命令模式中输入格式命令时,下一次重新打开vim还是会和原先一样,所以我们需更改其配置 ...
- spring boot中集成Redis
1 pom.xml文件中添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <arti ...
- .NET或.NET Core Web APi基于tus协议实现断点续传
前言 前两天我采用技巧式方案基本实现大文件分片上传,这里只是重点在于个人思路和亲身实践,若在实际生产环境要求比较高的话肯定不行,仍存在一些问题需要深入处理,本文继续在之前基础上给出基于tus协议的轮子 ...
- python设计模式之外观模式
python设计模式之外观模式 系统会随着演化变得非常复杂,最终形成大量的(并且有时是令人迷惑的)类和交互,这种情况并不少见.许多情况下,我们并不想把这种复杂性暴露给客户端.外观设计模式有助于隐藏系统 ...
- 前端面试?这份手撸Promise请你收下
前言 现在很多大厂面试前端都会要求能够手动的写出一个Promise,所以这里整理了一份手写的Promise. 绝对详细,功能绝对强大.如果你不了解Promise的基本使用,那么本篇文章可能不太适合你, ...