3项目里面全局用less变量 cli vue_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'
}
}
}
}
}
3项目里面全局用less变量 cli vue_VUE CLI3 less 全局变量引用相关推荐
- 3项目里面全局用less变量 cli vue_Vue实战14——抽离全局less变量与Vuex持久化、多模块构建...
上文中说到了利用Element-ui优化了导航栏,本节介绍抽离公共的less变量与利用Element-Ui实现登录注册页面.本项目git地址: https://gitee.com/vuejslearn ...
- 3项目里面全局用less变量 cli vue_vue-cli3配置使用vw实现移动端适配案例
前言:本demo是基于脚手架3创建的vue项目,主要演示的是如何使用vw实现移动端适配:并且在项目中如何引入自定义的less全局变量. 一. 配置vw适配: 1. 安装以下插件: npm instal ...
- 3项目里面全局用less变量 cli vue_vue-cli3 如何全局引入less变量
当有一个可在全局使用的公共less变量文件 variable.less 如何写才能一次性在所有.vue文件中引入这个文件? 我尝试了几种方法 1:安装style-resources-loader 然后 ...
- 3项目里面全局用less变量 cli vue_vue-cli3全局载入scss变量或less变量配置
scss 编辑 vue.config.js文件module.exports = { // ... css: { loaderOptions: { sass: { data: `@import &quo ...
- 微信小程序-设置全局的颜色变量
应用场景:每款应用都会有自己的一种主题颜色:比如京东的红色,和淘宝的橙色 1.在全局app.wxss样式中 设置 变量颜色 代码如下: /* 主题颜色 通过变量来实现 */ page{--theme ...
- Eclipse搭建springboot项目(六)全局异常
Eclipse搭建springboot项目(六)全局异常 知识点: 1.SpringBoot2.x服务端异常和SpringBoot配置全局异常 1).默认异常测试 int i = 1/0,不友好 2) ...
- shell基础（2）：编程基础之变量：全局/局部/环境变量（作用域、定义、操作）、位置参数、数组
对shell变量有一个系统性的了解 变量的种类:局部.全局.环境变量 变量的定义和操作:赋值.取值.取消变量 特殊变量:位置参数. $? 数组的定义和使用 变量的作用域 文章目录 1. 变量的种类 1 ...
- c语言全局变量结构怎么定义,C语言中如何定义全局结构体变量
匿名用户 1级 2014-12-29 回答 结构的定义 用户定义自己所需要的结构型,可以采用下列定义语句: 1 2 3 4 5 6 7 struct结构型名 { 数据类型符1 成员名1: 数据类型符2 ...
- springboot项目创建全局唯一id生成器
springboot项目创建全局唯一id生成方法,参考 Snowflake算法 yml文件 #app 全局唯一id生成 app:idGenerator:workerId: 1datacenterId: ...
最新文章
- Maven(插件配置和生命周期的绑定)
- 防止模型过拟合的必备方法！
- 韩磊老师与C#编程风格
- 【问题记录】raise IndexError(‘index {} is out of range‘.format(idx)) index 0 is out of range
- POJ3320 Jessica's Reading Problem 尺取法
- 51nod 1907（多项式乘法启发式合并）
- java关闭一个窗口打开另一个_推开中式门窗，就像打开了另一个写意的世界…...
- 【EMNLP2020】Cross-Thought句子表示预训练
- html新建盒子,html+css 盒子模式展示（备查）
- 跨境电商四种物流方式介绍-扬帆凌远
- editorMd插件的使用总结（包括开启图片上传及拖拉粘贴上传图片）
- 视频流中的 I帧 P帧 B帧 .
- 49次全国计算机以及靠,第49次全国计算机等级考试（国考）证书领取的通知
- 智能陈桥输入法软件测试,智能陈桥五笔输入法
- Heapsort 代码 学习笔记 阳春三月版
- mongo上云迁移同步mongoshake
- iOS开发之MOVE设计模式
- 云计算是什么，云计算的特点及主要形式
- Reactive简介
- 移动通信各制式、调制的速率及频谱利用率（2G-4G）
热门文章
- Unknown CMake command add_compile_definitions
- caffe 编译中出现的错误——fatal error: hdf5.h: 没有那个文件或目录
- 在OpenCV中图像边界扩展 copyMakeBorder 的实现
- oracle创建定时任务
- 60 Celery队列
- 一.MongoDB简介
- eclipse写java实现端口_使用eclipse(windows)在java中使用IPv6地址和端口号创建套接字...
- 京东css3动画全屏海报_京东超市的文案，写到吃货心坎里了
- oracle大数据量更新引发的死锁问题解决方法及oracle分区和存储过程的思考
- Linux下安装JDK，Tomcat，Mysql详细教程