Webpack 3 + PostCSS не загружается при изменении css файла @import

Question

Вот мой конфиг css

{ 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, функция горячей загрузки не работает, если я касаюсь файла CSS, который является @import, люди предложили мне поставить postcssImport({ addDependencyTo: webpack }) до первой строки плагина, но если я поставлю перед precss, я получу ошибку компиляции.

Интересно, если что-то не так с вышеупомянутым конфигом, любая помощь приветствуется.

Вы можете воспроизвести проблему в этом репо

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

Answer 1

Оказывается, мне нужно сделать две вещи

1) postcssImport({ addDependencyTo: webpack }) нужно быть первым в плагине

2) я пытался использовать sass @import style для моего частичного, но оказывается, мне нужно включить _ когда я импортирую свои частичные

И это решило мои проблемы.