今天項(xiàng)目中使用了postcss-loader、外加autoprefixer插件,后來(lái)發(fā)現(xiàn)這個(gè)對(duì)@import方式引用進(jìn)來(lái)的css沒(méi)有添加前綴
后來(lái)看了下postcss-loader的文檔,以及查閱了一些資料,發(fā)現(xiàn)推薦配置如下,重點(diǎn)是需要開(kāi)啟css-loader的importLoaders選項(xiàng),以及需要把postcss-loader放在css-loader之后,其他css插件sass|less|stylus-loader之前,問(wèn)題就解決了,完全不需要postcss-import插件。
webpack.config.js (recommended)
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
]
}
}
PS: @import方式引用css有一個(gè)缺點(diǎn),那就是多次引用會(huì)存在多份重復(fù)的css,增大css文件體積??梢詤⒖嫉恼f(shuō)法這里