webpack打包时,css自动添加浏览器前缀。我们需要用到一个Loader:postcss-loader,和一个插件:autoprefixer

安装

npm i postcss-loader autoprefixer -D

方法一

1.在webpack.config.js文件中,找到module下的rules属性,在里面添加一个对象,完整代码如下:

module:{
rules:[
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader','postcss-loader']
}
]
}

代码中,还有另外3个loader,因为use调用loader的顺序是从右往左的,所以顺序不能写错了,webpack打包.scss时,首先会调用postcss-loader为其添加浏览器前缀,(因为我代码中用了sass,所以引入了sass-loader),当浏览器前缀添加完后,sass-loader会把sass语法转换成css语法,在代码中,一般会有多个css文件,然而css-loader会将css文件整合成一段代码,这时,style-loader就会将这段代码,添加到页面的style标签中。

如果用的普通css,安装下面两个就行:

npm i style-loader css-loader -D

如果用的sass,需要安装如下依赖包:

npm i style-loader css-loader sass-loader node-sass -D

2.在webpack.config.js文件同级目录中,新建postcss.config.js文件,并且添加如下代码:

module.exports = {
plugins:[
require('autoprefixer')
]
}

配置完,直接打包运行即可。

方法二

直接把autoprefixer配置在postcss-loader里面

module:{
rules:[
{
test:/\.scss$/,
use:[
{loader:'style-loader'},//将css-loader整合在一起的代码,放在页面中的style标签里面
{loader:'css-loader'},//将各个css文件整合在一起
{loader:'sass-loader'},//将sass语法解析成css
{
loader:'postcss-loader',
options:{
plugins:[
require('autoprefixer')//postcss-loader会叫autoprefixer插件添加浏览器前缀
]
}
}
]
}
]
}
style-loader、 css-loader、 sass-loader的更多的用法,可自行去webpack官网查阅文档。灰机直达

这里有个坑,一开始安装的autoprefixer版本是9.x的,但是配置后没有效果,之后换成7.x的就可以了。

webpack配置css浏览器前缀的更多相关文章

  1. webpack配置根据浏览器自动添加css前缀的loader

    1.安装 postcss-loader autoprefixer npm install postcss-loader autoprefixer --save-dev 2.配置webpack.conf ...

  2. webpack配置css相关loader注意先后顺序

    一.问题描述 在webpack3中,引入animate.css失败. 二.问题分析 1.难道是入口main.js引用方式不对? import animate from 'animate.css' 2. ...

  3. storybook配置之基本配置和webpack配置

    默认配置 Storybook有一个默认的适合(suits)大型项目开发的webpack配置,假如你使用react app,他类似于创建一个react app的配置,并经过调整(tweaked ),使其 ...

  4. webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

    一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

  5. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  6. webpack通过postcss-loader添加浏览器前缀

    在webpack中,我们可以很方便的使用autoprefixer来为css3属性添加不同的浏览器前缀. 首先,需要安装autoprefixer不用多说了,其次是安装postcss-loader(npm ...

  7. CSS变量和浏览器前缀

    一.CSS变量 CSS变量是CSS的新特性,大多数浏览器都实现了这个功能,使用CSS变量有利代码复用,而且当我们修改变量值时,所有引用该变量的属性都会发生改变. 定义变量后可以有两种使用方法,第一种时 ...

  8. CSS常见的浏览器前缀

    为了让浏览器识别某些专属属性,有时候需要在CSS属性前增加浏览器前缀 -ms-:Microsoft IE -moz-:Mozilla Firefox -o-:Opera Opera -webkit-: ...

  9. [译]Autoprefixer:用最可行的方式处理浏览器前缀的CSS后处理器

    Autoprefixer,通过Can I Use数据库来确定哪些浏览器前缀是需要的,然后解析CSS文件,将前缀添加到CSS规则里. 你所要做的就是添加你的资源构建工具(比如:Grunt),然后你就可以 ...

随机推荐

  1. 在 Vim 中,删除 ^@ 符号的几种方法

    在 Vim 中,^@ 表示 ASCII 码中的 NULL 字符,编码为 0x00,占用一个字节. 删除方法 方法1,采用 <CTRL-V><CTRL-J> 或 <CTRL ...

  2. linux设备驱动程序--sysfs用户接口的使用

    linux sysfs文件系统 本文部分内容参考自官方文档 自2.6版本开始,linux内核开始使用sysfs文件系统,它的作用是将设备和驱动程序的信息导出到用户空间,方便了用户读取设备信息,同时支持 ...

  3. CentOS6.7编译php5安装错误大全

    在CentOS编译PHP5的时候有时会遇到以下的一些错误信息,基本上都可以通过yum安装相应的库来解决.以下是具体的一些解决办法: 复制代码 代码如下: checking for BZip2 supp ...

  4. pip换源-换成国内的源

    PyPI使用国内源   通过几次 pip 的使用,对于默认的 pip 源的速度实在无法忍受,于是便搜集了一些国内的pip源,如下: 阿里云 http://mirrors.aliyun.com/pypi ...

  5. Distance(2019年牛客多校第八场D题+CDQ+树状数组)

    题目链接 传送门 思路 这个题在\(BZOJ\)上有个二维平面的版本(\(BZOJ2716\)天使玩偶),不过是权限题因此就不附带链接了,我也只是在算法进阶指南上看到过,那个题的写法是\(CDQ\), ...

  6. Vue之Action

    (1)同步与异步 在 mutation 中混合异步调用会导致你的程序很难调试. 例如,当你调用了两个包含异步回调的 mutation 来改变状态,你怎么知道什么时候回调和哪个先回调呢? 这就是为什么我 ...

  7. ruby中的整数、浮点数、字符串之间的相互转换

    D:\learnProg\Ruby>irb#浮点数转换成整数,会强行去掉小数点后面的数字 irb(main):017:0> 123.45.to_i => 123 #整数转换成浮点数, ...

  8. 关于vue+axios上传文件的踩坑分析

    上传文件是每个前端开发者都会遇到的问题,在之前实习期做了一个上传文件的功能,当时没有彻底搞明白问题所在,现在重新复盘下. 1.使用formData来上传文件,没有使用axios上传文件,之前在学校有做 ...

  9. Generative Adversarial Networks overview(4)

    Libo1575899134@outlook.com Libo (原创文章,转发请注明作者) 本文章主要介绍Gan的应用篇,3,主要介绍图像应用,4, 主要介绍文本以及医药化学其他领域应用 原理篇请看 ...

  10. Aizu2249-Road Construction-(Dijkstra)

    https://vjudge.net/problem/Aizu-2249 题意:计划图中有n个城市m条路,首都是1号城市,要选一些路去修,让各个城市到首都的路径最短,在路径最短的情况下修路费用最小. ...