由于配置了 postcss 的插件 autoprefixer 自动添加前缀插件，在插件配置时出错，参照官网的配置，并没有配置规则
module.exports = {
'plugins': {
// to edit target browsers: use "browserslist" field in package.json
'autoprefixer': {}
},
}
上面是官网写的配置，并没用写 需要添加的浏览器规则
于是，经过一番波折，找到一份 配置规则
module.exports = {
plugins: [
// 兼容浏览器，添加前缀
require('autoprefixer')({
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
//'last 2 versions', // 所有主流浏览器最近2个版本
],
grid: true
})
]
}
写上去，自动添加前缀的小姑生效了，但是出现了一个报错，
虽然报错并不影响程序运行，服务器依然启动了，
但是，看着报错始终觉得有问题，没提示才是最好的
image.png
报错信息如上
解决方式，
image.png
Please do not use display: contents; if you have grid setting enabled
请不要使用显示:内容;如果您启用了网格设置
就很明显了，如掉 配置中的 grid: true 即可
module.exports = {
'plugins': {
// to edit target browsers: use "browserslist" field in package.json
'autoprefixer': {
browsers: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
//'last 2 versions', // 所有主流浏览器最近2个版本
]
}
},
}
或者这样
module.exports = {
plugins: [
// 兼容浏览器，添加前缀
require('autoprefixer')({
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
//'last 2 versions', // 所有主流浏览器最近2个版本
]
})
]
}
这样报错信息就没了
