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的就可以了。
原文地址:https://www.cnblogs.com/Mrrabbit/p/11202631.html
时间: 2024-11-05 22:40:49