如何导入 scss 文件并在 React 应用程序中全局使用它们？答案

【问题标题】：How to import scss files and use them globally in a React application?如何导入 scss 文件并在 React 应用程序中全局使用它们？
【发布时间】：2020-07-17 20:36:44
【问题描述】：

我的 React 应用程序结构如下：

-src
|-components
 |-Card.js
 |-Card.scss
 |-Navbar.js
 |-Navbar.scss
|-styles
 |-_mixins.scss
 |-_variables.scss
|-App.js
|-App.scss

我使用node-sass 所以对于component-x 我只需要import component-x.scss 来应用scss 文件。但是我有 _mixins.scss 和 _variables.scss 需要在任何地方使用，我不能在每个 scss 文件中使用 import 它们。如何在全局范围内导入这些文件，以便可以在任何我想要的地方使用它们？

【问题讨论】：

标签： reactjs sass node-sass

【解决方案1】：

创建一个main.scss 并在里面全部导入！

您的文件中有一个示例：

/********************************SASS MAIN***********************************/
//COMPONENTS
@import "components/card";
@import "components/navbar";

//STYLES
@import "styles/mixins";
@import "styles/variables";

然后在您的 App.js 中只需 import 'main.scss'

更多关于在 sass 中导入的信息here

【讨论】：

刚试了一下还是失败了。在Card.scss 我有@import "../styles/_mixins.scss" 工作。在尝试您的解决方案时，我删除了这一行并且找不到 mixins。
将 Card 和 Navbar 命名为 _card 和 _navbar 并且不要删除其他的下划线。更多信息在这里：sass-lang.com/documentation/at-rules/import
我只希望 mixins 和 variables 全局导入，但 Card.scss 和 navbar.scss 应该保持原样。
好吧，我稍微调整了一下，将_mixins.scss 和_variables.scss 放入src 文件夹中的main.scss，然后在组件中导入main.scss，它就可以工作了。但是，在我想使用这些全局 scss 变量的每个组件之上，我仍然需要编写 @import "./main.scss"，这不是很方便，但比导入 styles 文件夹中的每个 scss 文件要好
嗯，这很奇怪，如果你在你的 App 组件中导入，你就不需要在里面导入任何东西，因为你实际上在 SASS 生成的 mains css 中有它。