用于所有变量/混合等的 Reactjs 全局 scss 文件

Question

我有一个包含多个使用 scss 的组件的项目。

我想创建一个文件来全局存储我的所有变量和 mixin，然后我的项目中的任何其他 scss 文件都可以使用这些文件。无需手动将文件导入到我制作的每个 scss 文件中，这怎么可能？

我尝试将 index.css 制作成一个 scss 文件，并将我的所有变量和 mixins 移到那里。但并没有真正改变。我目前在我的组件中使用 scss 模块。有没有更好的办法？

我的文件夹结构

assets/
    sass/
        _variables.scss
        _mixins.scss

Components/
    .../
        componentName.js
        name.module.scss

index.css
index.js
App.js

Answer 1

所有scss文件都需要通过@import“连接”，如果你想要最少的工作，创建一个根目录并@import每个文件一次，同时确保变量和mixin被导入在另一个之前。

例如：

// utilities
@import 'utilities/variables', 'utilities/mixins';

//components
@import 'components/buttons', 'components/modals';