安装 postcss-loader
npm install postcss-loader -D
配置 webpack.config.js
module: {
rules: [{
test: /\.css/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
'postcss-loader'
]
}]
}
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
原本到这一步我们觉得应该会出现效果,结果什么效果都没有,如下图:
解决此问题的方法有两种:
1.在pack.json文件中添加如下代码
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
2.新建一个.browserslistrc文件,然后添加
last 1 version
> 1%
IE 10 # sorry
最后的效果如下:
webpck4.x autoprofixer失效的原因是:
需要指定浏览器的范围。
参考文章如下: