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

Question

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

我的文件夹结构：

/src 资产/ 图片/

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';

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