我正在从webpack v1迁移到v2。我按照官方文档更新webpack.config.js
:
...
module: {
rules: [
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader?modules&localIdentName=[path][name]_[local]--[hash:base64:8]',
'postcss-loader'
],
}),
exclude: [...]
},
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader',
}),
include: [...]
}
]
},
...
/**
* postcss: [
* nested(),
* autoprefixer(),
* values
* ]
*/
我的问题是postcss插件(嵌套,autoprefixer,值)。 Webpack 2不再支持自定义属性,建议使用options
。
我尝试了options
和plugins: () => [nested, autoprefixer, values]
,但无法使其发挥作用。
这样做的正确方法是什么?感谢。
答案 0 :(得分:1)
建议使用postcss.config.js
文件,该文件使用选项导出对象(请参阅Postcss usage)。您的配置看起来像这样(省略import语句):
module.exports = {
plugins: [
nested(),
autoprefixer(),
values
]
}
但是如果你愿意,你可以直接在webpack配置中指定它(如Postcss options所示):
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader?modules&localIdentName=[path][name]_[local]--[hash:base64:8]',
{
loader: 'postcss-loader',
options: {
plugins: () => [nested(), autoprefixer(), values]
}
}
]
})
exclude: [...]
},
请注意,选项位于加载程序本身,而不是整个规则。