想要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前缀的更多相关文章

  1. webpack打包css自动添加css3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  2. 关掉firefox(火狐)和palemoon地址栏自动加www.前缀功能【转】

    常用palemoon调试网站域名,它会很“贴心”的给你输入的网址前加上www.前缀,可有些域名前并没有www前缀,这样就导致了无法打开网站,今天学习下关闭它的这个功能. 打开firefox,在地址栏输 ...

  3. aspx页面控件id上自动加前缀

    公司的一个.net项目,使用的传统aspx页面开发,每个控件上自动加了前缀,最初以为是extjs.net自带的功能,后来研究发现,主要是因为内部使用了母版页.<asp:Content ID=&q ...

  4. Webpack按需加载一切皆模块

    前言 在学习 Webpack 之前,我们需要了解一个概念:模块. 何为模块? 如果你曾学过 Java , C# 之类的语言,一定会知道 Java 中的 import 或 C# 中的 using 吧? ...

  5. 介绍一款自动给添加不同浏览器CSS3前缀的插件~Autoprefixer(附其他前端开发插件)

    正文 自动给CSS文件添加不同浏览器的CSS3前缀:Autoprefixer 安装 只需兼容主流浏览器 正常情况使用:(在书写完的CSS样式文件中,按F1,选择Autoprefixer CSS) 这时 ...

  6. webpack快速入门——CSS进阶:自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  7. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  8. pace.js – 网页自动加载进度条插件

    网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...

  9. 最新版Google Chrome 自动加载flash插件的方法

    我们在用Selenium做自动化测试时,有时候需要浏览器自动加载flash插件,69以前的谷歌浏览器,可以通过加载属性的方法自动运行flash插件,如下: prefs={ "profile. ...

随机推荐

  1. CF708D Incorrect Flow

    CF708D Incorrect Flow 有源汇上下界最小费用可行流.(= =) 对每条给定的边连边: 首先\(f_i\)是给定的,所以要有一条这个边而且要流满,先\(a_i-b_i\)连一条上下界 ...

  2. maven核心,pom.xml详解

    什么是pom?    pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的u ...

  3. windows超级实用快键键

    1 电脑锁屏Win + L 有些时候,需要暂时离开座位去处理其他事,可是电脑还有数据再跑. 关掉的话,数据就白跑了,不关的话,又不想让别人看到我电脑的资料. 那么就按住windows键后,再按L键. ...

  4. python面试题(四)

    一.数据类型 1.字典 1.1 现有字典 dict={‘a’:24,‘g’:52,‘i’:12,‘k’:33}请按字典中的 value 值进行排序? sorted(dict.items(),key=l ...

  5. idea创建web项目教程

    官网下载idea,安装配置好后,双击进来,第一次创建项目时新建是这样的 第一步:   第二步:创建项目名和项目存放的路径 点finish进入这里   第三步: 第二步点OK进入这个页面,点上面那个加号 ...

  6. babel的使用(关于使用async报错的问题)

    一.配置文件.babelrc .babelrc 文件存放在项目的根目录下. { "presets": [], "plugins": [] } presets 字 ...

  7. Java实验报告(实验三)

    课程:Java程序设计          班级: 1351 姓名:王玮怡                学号:20135116 成绩:             指导教师:娄嘉鹏       实验日期: ...

  8. VC2013一些感受

    这是一个我很早就在用的编译器,因为是微软官方的,极其高大上,安装包,界面错误的提示处理都相当简洁明了,不像VC6.0以及Codeblock太low了 但其实,我想说,我并不怎么用这玩意~就像Siri做 ...

  9. yum 安装mongodb mysql

    // 云环境下更新包 (center os)yum update (多更有益) 修改yum包管理配置:vi /etc/yum.repos.d/mongodb-org-3.4.repo // 会自动新建 ...

  10. python项目离线环境配置指南

    参考文献: http://blog.csdn.net/candcplusplus/article/details/52156324 https://www.cnblogs.com/michael-xi ...