webpack loader的执行顺序为
从上到下
从右到左
但是代码中
use: ['style-loader',
'css-loader',
'sass-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')
]
}
},
],
上面的代码由于postcss-loader先执行了,然后在执行sass
所以没有给sass里的css代码加上兼容性前缀
所以解决办法是将sass-loader放在postcss-loader后面就好了,代码如下
use: ['style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')
]
}
},
'sass-loader',
],
若是到了这一步问题还没解决,
那你应该得设置支持哪些浏览器,必须设置支持的浏览器才会自动添加添加浏览器兼容。
最终版本代码
{
test: /\.scss$/,
use: ['style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({
"overrideBrowserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
}),
]
}
},
'sass-loader',
],
}
参考文章链接