vue-cli3 配置全局less 、sass 变量
之前在用vue-cli3框架的时候对于常用的less 、sass 变量都是需要时就在单文件中引入文件,这样做比较麻烦。那么基于 vue-cli3 如何配置全局的less 、sass 变量?
《1》安装
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 《2》vue.config.js配置 1.配置全局less变量
//第三方插件
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [
//这个是加上自己的路径,注意:试过不能使用别名路径
path.resolve(__dirname, "./src/assets/variable.less")
]
}
} 2.配置全局sass变量
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名
data: `@import "~@/variables.scss";`
}
}
}
经过这么点小优化,就无需在需要使用变量时在单文件中引入一次文件
vue-cli3 配置全局less 、sass 变量的更多相关文章
- vue/cli3 配置vux
安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...
- vue cli3配置开发环境、测试环境、生产(线上)环境
cli3创建vue项目是精简版的少了build和config这2个文件,所以配置开发环境.测试环境.生产环境的话需要自己创建env文件. 需要注意2点: 1.cli2创建项目生成的config文件里的 ...
- @vue/cli3+配置build命令构建测试包&正式包
上一篇博客介绍了vue-cli2.x配置build命令构建测试包和正式包,但现在前端开发vue项目大多数使用新版@vue/cli脚手架搭建vue项目(vue create project-name) ...
- vue/cli3 配置相对路径
根目录下新建 vue.config.js 文件 const path = require('path') function resolve(dir){ return path.join(__dirna ...
- vue中怎么全局引入sass文件
1.添加依赖 npm install sass-resources-loader --save-dev 2.修改build/utils.js scss: generateLoaders('sass') ...
- vue cli3 配置postcss
1.安装postcss-import,postcss-cssnext 包 2.修改package.json 将postcss响应的内容替换为 "postcss": { " ...
- vue cli3如何引入全局less变量
最近在项目中需要写一个全局的style.less,然后在各组件中可以直接调用: 1.在assets下创建一个less文件: 2.安装style-resources-loader (npm i styl ...
- 通过 sass-resources-loader 全局注册 Sass/Less 变量
使用webpack引入sass/less全局变量 sass或者less都提供变量设置,在需求切换主题的项目中使用less或者sass变量,只要修改变量值,编译后所有用到该变量的样式都会被修改为你想要的 ...
- vue cli3 项目配置
[转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...
随机推荐
- 使用runtime完成解档归档
简单的创建一个Person对象,并声明几个属性 @interface Person : NSObject<NSCoding> // 归档问题 必须遵守该协议 /** */ @propert ...
- gcc/clang编译带pthread.h头文件的源码时需要的参数
今天敲了一个小程序,编译时出现错误:undefined reference pthread_create 原来由于pthread库不是Linux系统默认的库,连接时需要使用库libpthread.a, ...
- opencv根据摄像头名称获取索引值
OpenCV的VideoCapture是一个视频读取与解码的API接口,支持各种视频格式.网络视频流.摄像头读取. 针对一般摄像头的读取,opencv为了实现跨平台读取摄像头时是使用的摄像头索引, V ...
- WUSTOJ 1237: 将八进制的字符串转换成等价的十进制字符串(Java)
1237: 将八进制的字符串转换成等价的十进制字符串 题目 输入八进制,输出十进制.更多内容点击标题. 分析 输入的八进制数有20位.已经超出了Integer.MAX_VALUE的范围,因此此 ...
- java获取端口号,不用request
Integer port = null; MBeanServer mBeanServer = null; List<MBeanServer> mBeanServers = MBeanSer ...
- This is very likely to create a memory leak. Stack trace of thread错误分析
1.问题描述 启动tomcat部署项目时,报This is very likely to create a memory leak. Stack trace of thread错误. 29-May-2 ...
- AES密码算法详解(转自https://www.cnblogs.com/luop/p/4334160.html)
0 AES简介 我们知道数据加密标准(Data Encryption Standard: DES)的密钥长度是56比特,因此算法的理论安全强度是256.但二十世纪中后期正是计算机飞速发展的阶段,元器件 ...
- 学习C#自作计算器,菜鸟初学,有大神的指点,希望做的不够好的地方请大家多多指导。同时希望非常无聊的大神能加些其它计算进去
可以做幂运算,根号运算,十进制与二进制互转,16进制与十进制互转 namespace WindowsFormsApplication15 { public partial class 祥哥计算器 : ...
- SpringCloud"灰度部署"——动态刷新网关配置
通过Acutator和SpringCloudConfig完成"灰度部署"——动态刷新网关路由配置 先声明下,我这个可能是冒牌的灰度部署,技术有限,纯粹个人笔记分享. 前段时间接到了 ...
- restTemplate源码解析(一)构造restTemplate的Bean实例
所有文章 https://www.cnblogs.com/lay2017/p/11740855.html 正文 构造一个restTemplate的Bean实例很容易,只需这样配置 @Bean publ ...