VUE CLI3 less 全局变量引用
方法一
1、添加依赖 style-resources-loader
2、vue.config.js中添加
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [],
},
},
};
3、添加全局less引入
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, './src/assets/varibles.less'),
],
},
},
};
4、加入path
const path = require('path');
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, './src/assets/varibles.less'),
],
},
},
};
方法二
const path = require('path')
module.exports = {
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
},
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, 'src/styles/variable.less'), // 需要全局导入的less
],
})
}
方法三
module.exports = {
css: {
loaderOptions: {
less: {
globalVars: {
primary: '#fff'
}
}
}
}
}
VUE CLI3 less 全局变量引用的更多相关文章
- Vue Cli3 TypeScript 搭建工程
Vue Cli3出来也一段时间了,我想尝试下Vue结合TypeScript搭建个工程,感受下Vue下用TS...网上有一篇讲的非常详细的教程 vue-cli3.0 搭建项目模版教程(ts+vuex+ ...
- vue/cli3 配置vux
安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...
- vue cli3超详细创建多页面配置
1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...
- 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求
最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...
- 安装VUE Cli3 框架方法
下面为大家介绍一下怎样安装 VUE Cli3的步骤 官网地址 https://cli.vuejs.org/zh/guide/installation.html 一.首先要检查一下是否安装node环 ...
- vue cli3.0 结合echarts3.0和地图的使用方法
echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...
- Vue CLI3 开启gzip压缩
gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compr ...
- 全局安装 Vue cli3 和 继续使用 Vue-cli2.x
官方链接:https://cli.vuejs.org/zh/guide/installation.html 1.安装Vue cli3 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @ ...
- Vue CLI3 关闭热替换后出现的warning
用vue cli3做项目的时候如果开启了typescript的严格模式,在dev server热替换的时候往往就会打出一大堆warning,严重的影响了编译效率.官方并没有提供关闭warning的ap ...
随机推荐
- 自定义控件之Region区域
构造Region 直接构造 public Region(Region region) //复制一个同样的Region变量 public Region(Rect r) public Region(int ...
- ISO/IEC 9899:2011 条款6.4.3——通用字符名
6.4.3 通用字符名 语法 1.通用字符名: universal_character-name: \u hex-quad(四位十六进制数) \U hex-quad hex-quad hex-quad ...
- CerntOS7下搭建git服务器
(1).安装git yum安装git,需要ssh的支持.某些版本需要安装git-core,那才是服务器. [root@youxi1 ~]# yum -y install git 创建git用户 [ro ...
- 常用SQL50句
Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,Tname) 教师表 问题 ...
- LeetCode_171. Excel Sheet Column Number
171. Excel Sheet Column Number Easy Given a column title as appear in an Excel sheet, return its cor ...
- QuickText for Notepad++
昨刚投入新欢Notepad++,思路如泉涌,码代码也不累了,一口气用她码了两篇文- 今再接再厉,继续.QuickText严格说来算不上什么神器级插件,也仅只是一个缩写快捷输入的插件而已.可用得好,那效 ...
- nginx check健康检查
nginx利用第三方模块nginx_upstream_check_module来检查后端服务器的健康情况 大家都知道,前段nginx做反代,如果后端服务器宕掉的话,nginx是不能把这台realser ...
- python 实现快速排序(面试经常问到)
# -*- coding: UTF-8 -*- # 递归实现, 把过程打印出来便于理解 def quick_sort1(lis, start, end): if start >= end: re ...
- 浅谈UML的概念和模型
讲了UML的基本的九种图:http://blog.csdn.net/jiuqiyuliang/article/details/8552956 来具体讲讲这九种视图: 1.用例图(use case di ...
- 了解 DML、DDL、DCL
一.DML DML(Data Manipulation Language)数据操纵语言: 最经常用到的 SELECT.UPDATE.INSERT.DELETE. 主要用来对数据库的数据进行一些操作 S ...