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来搭建项目. 本章 ...
随机推荐
- DSP VLIB实验
声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 引言 在dsp开发中,为了节省开发时间和难度,TI将一些成熟的算法封装为模块,供开发者使用.如果能充分利用这些 ...
- Asp.net SignalR 实现服务端消息实时推送到所有Web端
ASP .NET SignalR是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.实际上 Asp.net SignalR 2 实现 服务端消息推送到Web端, 更加 ...
- HTTP网页请求状态码
我们平时在打开一些网页的时候,会遇到打不开的情况,页面提示404错误,这个404就是http状态码.如果我们可以正常打开网页,这时也会有http状态码的,这个状态码就是200,只不过这时我们是无法通过 ...
- vector iterators incompatible
字面翻译迭代器类型不兼容 今天同事遇到的这个问题算是一个习惯性写法的问题.描述一下代码: struct Track{}; class BaseTrack { - std::vector<Trac ...
- FineReport工具
PostgreSQL链接问题: 正常安装FineReport工具和PostgreSQL数据库之后,在FineReport工具当中链接数据库显示连接失败的原因是因为FineReport安装包里面没有Po ...
- SSRAM、SDRAM和Flash简要介绍
问题1:什么是DRAM.SRAM.SDRAM?答:名词解释如下DRAM--------动态随即存取器,需要不断的刷新,才能保存数据,而且是行列地址复用的,许多都有页模式SRAM--------静态的随 ...
- python条件判断if/else - python基础入门(8)
生活中我们总是面临各种选择,选择不同,结果也不同,不管我们是否愿意,总会有结果,有的快乐,也有的痛苦…… 鲁迅说:人只要有钱,烦恼就会减掉90%以上,情商智商也会提高,更不会乱发火!(关键是:钱怎么来 ...
- HttpClient的几种请求方式
public static String doPostToken(String tokenUrl,String clientId,String clientSecret,String grantTyp ...
- XDomainRequest IE8&IE9 cors 跨域通讯的处理方法
版权声明:避免百度一下通片同一篇文章,未经博主允许不得转载.本博客作为笔记使用,正确性请自行验证. https://blog.csdn.net/u014071104/article/detail ...
- Linux/ubuntu 心得
基本命令 有n个软件未被升级(有强迫症的,不爽的 apt-get dist-upgrade 更改主机名字 git 不要免密输入的话,可在当前工作目录执行 git config credential.h ...