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

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

reactjs app中的全局SASS变量

1 个答案: