webpack4.x 安装postcss-loader 配合 autoprefixer 解决css3的兼容性

安装

浏览器前缀需要 post-loader、autoprefixer

cnpm install --save-dev css-loader style-loader postcss-loader autoprefixer
配置webpack.config.js

复制代码
{
test:/.css$/,
use:[
{loader:‘style-loader’},
{
loader:‘css-loader’,
options:{
importLoaders:1
}
},
{loader:‘postcss-loader’}

]

此方法会有警告，效果没影响

根目录创建postcss.config.js

在项目根目录创建 postcss.config.js，并且设置支持哪些浏览器，必须设置支持的浏览器才会自动添加添加浏览器兼容
复制代码
module.exports = {
plugins: [
require(‘autoprefixer’)({
“browsers”: [
“defaults”,
“not ie < 11”,
“last 2 versions”,
“> 1%”,
“iOS 7”,
“last 3 iOS versions”
]
})
]
};

推荐，无警告

根目录创建postcss.config.js

在项目根目录创建 postcss.config.js，并且设置支持哪些浏览器，必须设置支持的浏览器才会自动添加添加浏览器兼容
复制代码
module.exports = {
plugins: [
require(‘autoprefixer’)
]
};
package.json中
加入
复制代码
“browserslist”: [
“defaults”,
“not ie < 11”,
“last 2 versions”,
“> 1%”,
“iOS 7”,
“last 3 iOS versions”
]