プロジェクトまたはディレクトリから.scssファイルを自動的にインポートする方法

Question

Reactjsアプリケーションで作業しています。私はWebpackを使用しています。 私の目標は、コンポーネントを作成して、そのコンポーネントのスタイリングを同じディレクトリに持つ.scssファイルを作成できるようにすることです。

例：

|- components/ 
|   |-- component1.js 
|   |-- component1.scss (automatically import files like this one!) 
| 
|- main.scss (gets loaded by webpack by default) 

私は自動的にmain.scssファイルに毎回新しいファイルを@importをすることの必要性なし.scssファイルをインポートすることができるようにするために行うには何が必要です創造された。私は、指定されたディレクトリ内のすべてのファイルをインポートすることができます。新しい.scssを作成すると、自動的にビルド時のスタイルに追加されます。私は輸入の順番は気にしない。 これはすべて可能ですか？

Answer 1

あなたが探しているものはhttps://www.npmjs.com/package/import-glob-loaderです。

グロブ（グロブロード）では、@import "components/**/*"型宣言を記述し、Railsアセットパイプラインのような.scssファイルをすべて取得できます。

Answer 2

最も簡単な方法は、Gulpを使用してアプリを構築する場合は、gulpfile.jsのパスを変更することです。

はこのブログ上の手順に従ってください：http://www.michaelbromley.co.uk/blog/425/automatic-import-of-lesssass-files-with-gulp

Answer 3

直接ディレクトリ内のすべてをインポートするSASSを指示する方法はありません。 JustHのglobローダはこの機能を追加します。