在 webpack 2.x 中使用带有 postcss 的 autoprefixer
问题描述：
如何在 webpack 2.x 中使用 autoprefixer.
How to use autoprefixer with webpack 2.x.
以前，它曾经是这样的......
Previously, it used to be something like this...
...
module: {
loaders: [
{
test: /\.scss$/,
loader: 'style!css!sass!postcss'
}
]
},
postcss: () => {
return [autoprefixer]
},
...
但是，它不再起作用了.
But, it's not working anymore.
如何改写成webpack@2.x.x?
How to rewrite it to webpack@2.x.x?
答
Webpack 2.x.x 是杀手和构建破坏者
webpack 2.x.x 引入了 webpack.LoaderOptionsPlugin() 插件，您需要在其中定义所有加载器选项插件.比如，autoprefixer 是 postcss-loader 的插件.所以，它必须到这里.
Webpack 2.x.x is a killer and a build breaker
webpack 2.x.x introduced webpack.LoaderOptionsPlugin() plugin where you need to define all the loader option plugins. Like, autoprefixer is a plugin for postcss-loader. So, it has to go here.
和
-
module.rules替换module.loaders - 所有加载器都应该明确说明它们是加载器.前任.
loader: 'style!css'应该是loader: 'style-loader!css-loader'
-
module.rulesreplacesmodule.loaders - All the loaders should have explicitly say that they are a loader. Ex.
loader: 'style!css'should beloader: 'style-loader!css-loader'
新配置看起来像这样...
The new config will look something like this...
...
module: {
rules: [
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer(),
]
}
})
],
...
希望对大家有帮助.