reactjs - reactjs 应用程序中的全局 SASS 变量

Question

我目前正在学习 reactjs，我刚刚将 SASS 添加到我的项目中。但是，我想创建一个文件来全局存储我所有的变量和混合，然后我的项目中的任何其他 scss 文件都可以使用它。无需手动将文件导入我制作的每个 scss 文件，这怎么可能？

我的文件夹结构:

/源代码 Assets / 图片/

components/
    app/
        app.js
        app.scss

styles/
    scss/
        main.scss
        _var.scss
        _mixins.scss
        _typography.scss

index.css
index.js

Answer 1

您必须在主导入文件的顶部导入变量，所有其他导入都在后面。因此，假设您的目录结构如上，在 main.scss 中您需要执行以下操作:

@import 'var';
@import 'mixins';
@import 'typography';

...

// Component imports
@import '../../components/app/app';

或者，您可以在靠近项目基础的地方设置一个共享的主导入文件(例如，index.scss)，然后看起来像:

// in `styles/scss/main.scss`
@import 'var';
@import 'mixins';
@import 'etc';

// in `index.scss`
// Base style import
@import 'styles/scss/main.scss';

// Component imports
@import 'components/app/app';
@import 'components/etc/etc';

这里的重要因素是您需要在变量导入之后导入任何需要访问您的共享变量的东西。否则变量将不在范围内。