在 ReactJS 项目中自动导入所有 *.scss答案

【问题标题】：Auto-import all *.scss in ReactJS project在 ReactJS 项目中自动导入所有 *.scss
【发布时间】：2021-09-07 23:03:46
【问题描述】：

有没有办法将所有 _*.scss 文件导入 React 项目中的主 App.scss 文件？由于每个组件都有单独的文件夹，我想避免输入

@import './components/UI/button';
@import './components/UI/menu';
@import './components/Forms/textInput';

完美的是这样的工作代码：

@import './components/*';

我知道顺序问题，我不影响我的css，文件可以随机导入。

【问题讨论】：

有什么原因不能在使用这些样式的适当组件中导入样式？这种方法将确保没有注入未使用的代码（实际上是带有代码的文件）。同样多次导入同一个文件并不意味着在包中复制代码。最后，通常这意味着更改项目结构的灵活性更大
直到现在我这样做了 - 在每个组件文件夹中，例如 /component/Button/，我通过简单的导入 './Button.css' 导入了 Button.js 和 Button.css。有人告诉我在 React 项目中使用 SASS 是一种很好的做法，这就是为什么我想知道如何在没有太多输入的情况下实现它。老实说，我认为带有 css-variables 的 css 对 React 来说还不错。
实际上你可以像导入css一样制作import './style.scss'。你只需要 webpack to be configured accordingly
导入 CSS 的类似设置。相反，正如skyboyer 所提到的，创建一个位于styles 文件夹根目录的styles.scss 或index.scss，它会导入您的所有部分（这些部分应该包含将由许多不同组件共享和使用的样式）。然后，从组件级 scss 文件中，您只需导入单个样式表文件（如导入组件）。此外，您还有一个 globals.scss 文件，可以导入任何静态资产。
一个更流行的方法是styled-components，它的目的是在JS文件中包含所有与可重用组件相关的应用程序：github.com/styled-components/styled-components

【解决方案1】：

如果你真的想要，glob 包可以做到。不过我建议不要这样做，直接在组件中包含一个 sass 文件更有效，但主要是因为 CSS 中的顺序很重要。

【讨论】：

【解决方案2】：

您可以在components 目录中创建文件_index.scss 并从子目录中导入所有文件。导入后可以写@import './components/index';或@import './components';

【讨论】：