postcss.config.js
module.exports = {
plugins: [require('autoprefixer')],
}
webpack.config.js
module: {
rules: [
//css-loader解析 @import 这种语法
// style-loader 把css插入到head标签中
// loader的顺序,默认是从右向左执行 从下到上执行
// 格式:[] / [{loader:''}]
{
test: /\.css$/,
use: [
// {
// loader: 'style-loader',
// options: {
// insert: 'head',
// },
// },
MiniCssExtractPlugin.loader,
{ loader: 'css-loader' },
{ loader: 'postcss-loader' },
],
},
{
test: /\.less$/,
use: [
// {
// loader: 'style-loader',
// options: {
// insert: 'head',
// },
// },
MiniCssExtractPlugin.loader,
{ loader: 'css-loader' },
{ loader: 'postcss-loader' },
{ loader: 'less-loader' },
],
},
配置完了,还不会立即生效,还需要给它配置转化规则
官网已经跟我们说明了这一点 autoprefixer
翻译:autoprefixer需要搭配Browserslist,提供了两种方式去配置Browserslist,
- (官网推荐使用这种方式)在根目录下创建一个.browserslistrc文件,再写进去相关的配置,
- 或者在package.json中进行配置
- 其他的配置如babel-preset-env和Stylelint可以共享这份规则
这些配置在官网都可以找到 browserslist
.browserslistrc
last 2 version
> 1%
iOS >= 7
Android > 4.1
Firefox > 20
package.json中
"browserslist": [
"last 2 version",
"> 1%",
"iOS >= 7",
"Android > 4.1",
"Firefox > 20"
]
再进行打包: