在webpack@4中配置如下:
步骤:
1、把插件下载到开发依赖中,
npm i postcss-loader@3.0.0 postcss@8.3.6 autoprefixer@8.6.5 -D
2、在 webpack.config.js 配置 module
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
}]
}
3、创建 postcss.config.js 文件
module.exports = {
plugins: [
require(‘autoprefixer’)()
]
}
4、在 package.json 文件中(这是一种配置postcss-loader的一种方式)
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
5、编译代码就可以了
有时下载插件不注意版本的话,会报如下错误!!!
报错原因:autoprefixer版本过高
解决办法:1)降低 autoprefixer 版本
2) 执行命令: npm install autoprefixer@8 --save0dev || npm i autoprefixer@8 -D
☆注意:如果直接执行 npm i autoprefixer -D 命令的话会,会直接下载最新版本的包,而最新版本上只在webpack 最新版本上使用
☆测试版本:
webpack V4.46.0
webpack-cli V3.3.12
autoprefixer V8.6.5
3) 重新打包即可!
GitHub (postcss-loader) 传送门:https://github.com/webpack-contrib/postcss-loader#readme
NPM (postcss-loader) 传送门:https://www.npmjs.com/package/postcss-loader
就这样子,欢迎指正~