Как автоматически импортировать файлы .scss из проекта или из каталога

Question

Я работаю над приложением Reactjs. Я использую Webpack. Моя цель - создать компонент и создать файл .scss со стилем для этого компонента в том же каталоге.

например:

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

Что мне нужно сделать для того, чтобы иметь возможность автоматически импортировать .scss файлы без необходимости делать в @import в файле main.scss каждый раз, когда новый файл создано. Я был бы приемлем для импорта всех файлов в заданный каталог. Если я создам новый .scss, он должен автоматически добавляться в стили при сборке. Меня не интересует порядок импорта. Возможно ли это?

Answer 1

То, что вы ищете, это https://www.npmjs.com/package/import-glob-loader.

Globling или glob-загрузка позволит вам написать объявления типа @import "components/**/*" и захватить все .scss-файлы, как в конвейере Rails.

Answer 2

Самый простой способ - изменить путь в gulpfile.js, если вы используете Gulp для создания своего приложения.

Следуйте инструкциям на этом блоге: http://www.michaelbromley.co.uk/blog/425/automatic-import-of-lesssass-files-with-gulp

Answer 3

Там нет никакого способа, чтобы напрямую сказать дерзость импортировать все в директории. Глочный загрузчик JustH добавляет эту функциональность.