如何从项目或目录中自动导入.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文件，而不需要在main.scss文件每次做一个@import一个新的文件做被建造。我可以接受导入给定目录内的所有文件。如果我创建一个新的.scss，它应该自动添加到构建样式上。我不关心进口的顺序。 这是可能的吗？

Answer 1

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

Globbing或glob加载可让您编写@import "components/**/*"类型声明，并像Rails资产管道一样获取所有.scss文件。

Answer 2

最简单的方法是修改gulpfile.js中的路径，如果您使用Gulp来构建您的应用程序。

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

Answer 3

有没有办法直接告诉SASS到一个目录中导入的一切。 JustH的glob loader增加了这个功能。