SCSSパーシャル（@import）とWebpackファイルのインポートはどちらですか？

Question

私は簡単なアプリケーションを構築しており、Webpackの設定をよりよく理解するためにWebpackの設定を行っています。現在、私はindex.jsファイル（Webpack用に設定したエントリポイント）にインポートしているmain.scssファイル（私はすべてのスタイルを書いています）を持っています。ここまでは順調ですね。

私は、Webpackの前に、すべてのファイルをSCSSの部分的なものにしてから、それらをすべて私のmain.scssにインポートすることを前提とした、小さなファイル（正規化、変数、ミックスインなど）ファイル。しかし、私はWebpackを使用しているので、私はそれをやり続けるべきかどうか、あるいはWebSpackにすべてのSCSSファイルをインポートして、部分的に部分的に使うべきかどうかを考えていますか？トピックの説明があれば便利です。私は他のアプローチよりも1つのアプローチの利点について多くのオンラインを見つけていません。

Answer 1

私が構築していた小さなマルチページアプリケーションでこの状況に遭遇しました。 page-1.scss、page-2.scss、page-3.scssとしましょう。すべてのページにCSSが含まれているcommon.bundle.cssを作成したかったのです。

最初に、page-*.scssファイルの先頭に@import '_base';という宣言がありました。私はCommonsChunkPluginがこれらの同様のインポートを考慮に入れて、それをcommon.bundle.cssに抽出すると仮定しました。しかし、私は_base.scssが各page-*.bundle.cssに依然として重複していることを発見しました。ページのそれぞれのエントリjsファイル内の各共有部分をインポートした後、CommonsChunkPluginは、各共有部分を正しくcommon.bundle.cssに抽出することができました。

SCSS @importを使用して、すべての部分データを1つのCSSファイルにインポートした後、webpackがそのファイルを1つの依存関係として処理しているようです。 webpackのimportを使用して、それぞれの部分を依存関係として扱いました。CommonsChunkPluginが対応できました。

私の状況では、webpack経由でのインポートがSCSSインポートよりも好まれていました。残念ながら、私は個人的な経験に基づいているため、この特定の状況に関連するリンクはありません。ここで

Answer 2

は、私が過去に使用したセットアップはプロジェクトを反応させるのだ。

• 輸入main.scssは新しいSASSファイルをインポートするプロセスを自動化するためにあなたのmain.scss使用import-glob-loaderであなたのindex.js

• から - それはですすべての新しいSassファイルをmain.scssに追加することを忘れがちです。

main.scss

@import "src/normalize" 
@import "src/components/**/*" 

Webpack.config.js（WebPACKの2+）

rules: [ 
    { 
     test: /\.scss/, 
     enforce: "pre", 
     loader: "import-glob-loader" 
    }, 
    // ... other loaders 
] 

これは、自動的に新しいバンドルされます：あなたのmain.scssは、次のようになりますあなたがsrcに追加するsassファイルこの設定を使用する場合は、生成されたCSSファイルの全体的なサイズが増えるため、sassファイルで@importを最小化することが重要です。これらのインポートはファイルサイズに追加されないので、例外は@importです。ミックスインと変数のみを含むファイルです。

多くの異なるディレクトリ（通常はそれぞれのコンポーネントのディレクトリにあります）に多くのsassファイルがあるReactのようなフレームワークで使用すると、この設定が最も効果的です。