記一下webpack打包, 讓css自動(dòng)添加瀏覽器前綴遇到的坑
因?yàn)榫W(wǎng)絡(luò)問(wèn)題,這里使用cnpm下載
1.安裝
cnpm i -D postcss-loader autoprefixer
2.配置(直接在webpack.config.js中配置)
module:?{????
????rules:?[
????????{? test:?/\.less$/,?//?解析.less文件,?需要先執(zhí)行cnpm?i?-D?style-loader?css-loader????????
? ? ? ? ? ?use:?['style-loader',?'css-loader',?{? loader:?'postcss-loader', options:?{? plugins:?[require('autoprefixer')] } },?'less-loader']?
????????}?
????]
}
less文件內(nèi)容如下:
坑來(lái)了
運(yùn)行命令打包npm run build, 瀏覽器中顯示結(jié)果如下:
瀏覽器前綴沒(méi)有???
解決辦法:
一開(kāi)始運(yùn)行cnpm i -D postcss-loader autoprefixer, 沒(méi)有指定autoprefixer的版本, 默認(rèn)安裝的是9.x的版本:
直接運(yùn)行cnpm i -D autoprefixer@7.0后, 變成
之后, 再次運(yùn)行npm run build, 瀏覽器的前綴終于出現(xiàn)了
