webpack3.0中的css转换器配置,之前错了不少,希望能给到调试错误的同学帮助,仅供参考
建议在webpack.config.js同层目录下建立postcss.config.js,否则如果你把postcss的一些options写在loader里面,你引入less和sass的时候同样需要再写一遍postcss的配置。
postcss.config.js代码如下:
module.exports = {
plugins:[
require('postcss-import'),//需要安装 npm install postcss-import --save-dev,这句代码是会对一个js文件里面import进来的多个css放在同一个style里面,如果是多个文件引入就会生成多个
require('autoprefixer')({
broswers:['>1%','last 5 versions','Firefox ESR','not ie < 9']
})
]
}
webpack.config.js代码如下:
{
test: /\.css$/,
//这里用数组方式或者loader字符串连接方式都可以
use:[
'style-loader',
'css-loader?importLoaders=1',//对于css中@import进来的css同样做前缀处理
'postcss-loader'
]
}