webpack插件自动加css3前缀
想要webpack帮忙自动加上“-webkit-”之类的css前缀,我们需要用到postcss-loader和它的插件autoprefixer
1.安装
npm i postcss-loader autoprefixer -D
2.加loader
//...
module:{
rules:[
{
test:/\.scss$/,
use: extractPlugin.extract({
use:['css-loader?importLoaders=1','postcss-loader','sass-loader'],
fallback: 'style-loader'
}),
exclude: path.resolve(__dirname,'./node_modules')
}
]
}
其实就是css-loader前面插一个postcss-loader
而参数importLoaders=1是为了预防css文件里面再import其他css文件,会使得import进来的不会自动加前缀
3.配置postcss
在webpack.config.js的同级目录下添加postcss.config.js,postcss-loader会自动去读取配置
module.exports = {
plugins:[
require('autoprefixer')({
browsers: ['last 10 versions','Firefox >= 20','Android >= 4.0','iOS >= 8']
})
]
}
webpack插件自动加css3前缀的更多相关文章
- webpack打包css自动添加css3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- 关掉firefox(火狐)和palemoon地址栏自动加www.前缀功能【转】
常用palemoon调试网站域名,它会很“贴心”的给你输入的网址前加上www.前缀,可有些域名前并没有www前缀,这样就导致了无法打开网站,今天学习下关闭它的这个功能. 打开firefox,在地址栏输 ...
- aspx页面控件id上自动加前缀
公司的一个.net项目,使用的传统aspx页面开发,每个控件上自动加了前缀,最初以为是extjs.net自带的功能,后来研究发现,主要是因为内部使用了母版页.<asp:Content ID=&q ...
- Webpack按需加载一切皆模块
前言 在学习 Webpack 之前,我们需要了解一个概念:模块. 何为模块? 如果你曾学过 Java , C# 之类的语言,一定会知道 Java 中的 import 或 C# 中的 using 吧? ...
- 介绍一款自动给添加不同浏览器CSS3前缀的插件~Autoprefixer(附其他前端开发插件)
正文 自动给CSS文件添加不同浏览器的CSS3前缀:Autoprefixer 安装 只需兼容主流浏览器 正常情况使用:(在书写完的CSS样式文件中,按F1,选择Autoprefixer CSS) 这时 ...
- webpack快速入门——CSS进阶:自动处理CSS3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- jquery 页面滚动到底部自动加载插件集合
很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...
- pace.js – 网页自动加载进度条插件
网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...
- 最新版Google Chrome 自动加载flash插件的方法
我们在用Selenium做自动化测试时,有时候需要浏览器自动加载flash插件,69以前的谷歌浏览器,可以通过加载属性的方法自动运行flash插件,如下: prefs={ "profile. ...
随机推荐
- CF708D Incorrect Flow
CF708D Incorrect Flow 有源汇上下界最小费用可行流.(= =) 对每条给定的边连边: 首先\(f_i\)是给定的,所以要有一条这个边而且要流满,先\(a_i-b_i\)连一条上下界 ...
- maven核心,pom.xml详解
什么是pom? pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的u ...
- windows超级实用快键键
1 电脑锁屏Win + L 有些时候,需要暂时离开座位去处理其他事,可是电脑还有数据再跑. 关掉的话,数据就白跑了,不关的话,又不想让别人看到我电脑的资料. 那么就按住windows键后,再按L键. ...
- python面试题(四)
一.数据类型 1.字典 1.1 现有字典 dict={‘a’:24,‘g’:52,‘i’:12,‘k’:33}请按字典中的 value 值进行排序? sorted(dict.items(),key=l ...
- idea创建web项目教程
官网下载idea,安装配置好后,双击进来,第一次创建项目时新建是这样的 第一步: 第二步:创建项目名和项目存放的路径 点finish进入这里 第三步: 第二步点OK进入这个页面,点上面那个加号 ...
- babel的使用(关于使用async报错的问题)
一.配置文件.babelrc .babelrc 文件存放在项目的根目录下. { "presets": [], "plugins": [] } presets 字 ...
- Java实验报告(实验三)
课程:Java程序设计 班级: 1351 姓名:王玮怡 学号:20135116 成绩: 指导教师:娄嘉鹏 实验日期: ...
- VC2013一些感受
这是一个我很早就在用的编译器,因为是微软官方的,极其高大上,安装包,界面错误的提示处理都相当简洁明了,不像VC6.0以及Codeblock太low了 但其实,我想说,我并不怎么用这玩意~就像Siri做 ...
- yum 安装mongodb mysql
// 云环境下更新包 (center os)yum update (多更有益) 修改yum包管理配置:vi /etc/yum.repos.d/mongodb-org-3.4.repo // 会自动新建 ...
- python项目离线环境配置指南
参考文献: http://blog.csdn.net/candcplusplus/article/details/52156324 https://www.cnblogs.com/michael-xi ...