webpack配置css浏览器前缀
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的就可以了。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
