更改@import的css文件时，Webpack 3 + PostCSS不会热加载答案

【问题标题】：Webpack 3 + PostCSS does not hotloading when changed css file of @import更改@import的css文件时，Webpack 3 + PostCSS不会热加载
【发布时间】：2018-03-03 12:05:12
【问题描述】：

这是我的 css webpack 配置

{ test: /\.css$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } }, { loader: 'postcss-loader', options: { sourceMap: true, // https://github.com/postcss/postcss-loader/issues/92 // https://github.com/postcss/postcss-loader/issues/8 plugins: () => [ precss(), postcssImport({ addDependencyTo: webpack }), postcssNested(), postcssCssnext({ browsers: ['last 2 versions', 'ie >= 9'], compress: true, }), ], }, }, ], }

我使用的是 Webpack 3，如果我触摸一个 @import 的 css 文件，热加载功能将不起作用，人们建议我将 postcssImport({ addDependencyTo: webpack }) 放在插件的第一行，但如果我把在 precss 之前，我得到了一个编译错误。

我想知道上述配置是否有任何问题，感谢任何帮助。

您可以在此 repo 中重现该问题

https://github.com/iroy2000/react-redux-boilerplate.

【问题讨论】：

标签： webpack postcss webpack-3 postcss-import

【解决方案1】：

原来我需要做两件事

1) postcssImport({ addDependencyTo: webpack }) 需要在插件中排在第一位

2) 我试图将sass @import style 用于我的部分，但事实证明我需要在导入部分时包含_。

这解决了我的问题。

【讨论】：