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

【问题标题】：How to automatically import .scss files from project or from directory如何从项目或目录中自动导入 .scss 文件
【发布时间】：2016-12-09 15:51:35
【问题描述】：

我正在开发一个 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，它应该会在构建时自动添加到样式中。我不关心导入的顺序。这有可能吗？

【问题讨论】：

标签： javascript node.js reactjs sass webpack

【解决方案1】：

你要找的是https://www.npmjs.com/package/import-glob-loader。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

他们说他们使用的是 webpack，而不是 gulp。

【解决方案3】：

没有办法直接告诉 sass 导入目录中的所有内容。 JustH 的 glob 加载器添加了这个功能。

【讨论】：