Webpack 3 + PostCSS n'a pas changé quand hotloading fichier css de @import

Question

Voici ma config webpack 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, }), ], }, }, ], }

Et j'utilise Webpack 3, la fonction hotloading ne fonctionne pas si je touche un fichier css qui est un @import, les gens m'ont suggéré de mettre postcssImport({ addDependencyTo: webpack }) à la première ligne du plugin, mais si je mets avant le precss, j'ai eu une erreur de compilation.

Je me demande s'il y a quelque chose de mal avec la configuration ci-dessus, toute aide est appréciée.

Vous pouvez reproduire le problème dans ce repo

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

Answer 1

Il se trouve que je dois faire deux choses

1) postcssImport({ addDependencyTo: webpack }) doivent d'abord être dans le plugin

2) Je tentais d'utiliser sass @import style pour ma partie, mais il se avère que je dois inclure _ lorsque j'importe mes partiels.

Et cela a résolu mes problèmes.