javascript - 如何从项目或目录自动导入 .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/**/*" 类型声明并获取所有 .scss 文件，就像在 Rails Assets 管道中一样。