私は最近GulpからWebPack（v3）に移行しましたベースのビルドシステム、そしてほとんどの部分でそれはかなり良いです。しかし私はCSS開発の経験を以前のものと一致させるのに苦労しています。
私はSASSを使って私のCSSを書き、それからWebPackで以下の設定を使います
Module.Rules：
{
test: /.(s*)css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: { minimize: isProd }
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
],
})
},
プラグイン
new ExtractTextPlugin({
filename: "app.bundle.css",
disable: !isProd
}),
だから私は発達しているとき、すなわち !isProd その ExtractTestPlugin 無効になっており、のフォールバックを使用します。 style-loader。これはHot CSSの置き換えを可能にします。これがないと、CSSの更新を表示するためにページ全体を更新する必要があります。
これはすべてうまくいきます、私はCSSを変更し、画面に表示される1秒後に変更しますが、CSSセレクターがどのファイルまたはルールにあるのかをデバッグしようとすると、問題があることがわかります。
この場合、どのスタイルが原因であるのかを確認したいと思います。 font-size することが 1.5rem。私はそれが私のCSSにあるとは思わないサードパーティ製のライブラリですが、原因を突き止めることができず（〜50のインラインスタイルが追加されています）、スタイルタグのリンク（以前は正しい行番号のCSSファイルに移動していました）をクリックするだけです。の始まりに私 <style> タグ。
どうすればこの経験を向上させることができますか？私はシングルに満足している app.bundle.css 通常はリンクされているファイル（インラインではないので行番号が付けられます）が、CSSでHMRを維持したいのです。
回答：
回答№1は0ソースマップを追加することで、配信方法（スタイルタグ）を効果的に隠し、正しく機能するソースコードへの直接リンクをブラウザに与えることがわかります。
これを見てください ギブス いくつかの情報を投稿する。
これが私の最後のCSS WebPackコードです。
{
test: /.(s*)css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: { minimize: isProd, sourceMap: true }
},
{
loader: "postcss-loader",
options: { sourceMap: true }
},
{
loader: "sass-loader",
options: { sourceMap: true }
}
],
})
},