如何从项目或目录自动导入.scss文件

我正在使用Reactjs应用程序。 我正在使用Webpack。 我的目标是能够创build一个组件，并创build一个.scss文件，该组件的样式在同一个目录中。

例如：

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

为了能够在每次创build新文件时自动导入.scss文件而不需要在main.scss文件中执行@import，我需要做些什么。 我可以接受导入给定目录内的所有文件。 如果我创build一个新的.scss，它应该自动添加到生成的样式。 我不关心import的顺序。 这是可能吗？

Answer 1

你在找什么是https://www.npmjs.com/package/import-glob-loader 。

Globbing或者glob加载，可以让你编写@import "components/**/*"types的声明，并像Rails资产pipe道一样抓取所有的.scss文件。

Answer 2

最简单的方法是修改gulpfile.js中的path，如果你使用Gulp来构build你的应用程序。

按照这个博客上的步骤： http : //www.michaelbromley.co.uk/blog/425/automatic-import-of-lesssass-files-with-gulp

Answer 3

没有办法直接告诉sass导入一个目录中的所有内容。 JustH的glob loader增加了这个function。