首先安装postcss-loader
和 autoprefixer
(自动添加前缀的插件);
npm install --save-dev postcss-loader autoprefixer
接下来,在webpack配置文件中添加
postcss-loader
,在根目录新建
postcss.config.js
,并添加如下代码之后,重新使用
npm start
打包时,你写的css会自动根据Can i use里的数据添加不同前缀了。
//webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
}
}
// postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}