Reactjs 如何在CreateReact应用程序中使sass文件成为全局文件而不弹出？

我使用创建反应应用程序，我尝试共享SASS代码，而不必导入每个组件，因此它是全局的。我读了另一个答案，他们建议使用sass资源加载器，但似乎您必须运行“弹出”才能使其正常工作，有其他选择吗

///基金会.scss////

@import '../../../node_modules/foundation-sites/scss/vendor/normalize.scss';
@import '../../../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';
@import '../../../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/helpers/true';
@import '../../../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/functions/contain';
@import '../../../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/functions/purge';
@import '../../../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/functions/remove';
@import '../../../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/functions/replace';
@import '../../../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/functions/to-list';

@import 'settings.scss';

@charset "UTF-8";

// Utilities
@import 'util/util.scss';

// Global styles
@import '../../../node_modules/foundation-sites/scss/global.scss';
@import '../../../node_modules/foundation-sites/scss/typography/typography.scss';

// Grids
@import '../../../node_modules/foundation-sites/scss/grid/grid';
@import '../../../node_modules/foundation-sites/scss/xy-grid/xy-grid';

@import '../../../node_modules/foundation-sites/scss/components/accordion';

// Helpers
@import '../../../node_modules/foundation-sites/scss/components/float';
@import '../../../node_modules/foundation-sites/scss/components/flex';
@import '../../../node_modules/foundation-sites/scss/components/visibility';
@import '../../../node_modules/foundation-sites/scss/prototype/prototype';

@mixin foundation-everything(
    $flex: true,
    $prototype: false
) {
    @if $flex {
        $global-flexbox: true !global;
    }

    // Global styles
    @include foundation-global-styles;
    // @include foundation-forms;
    @include foundation-typography;

    // Grids
    @if not $flex {
        @include foundation-grid;
    }
    @else {
        @if $xy-grid {
        @include foundation-xy-grid-classes;
        }
        @else {
        @include foundation-flex-grid;
        }
    }

    // Containers
    @include foundation-accordion;

    // Helpers
    @include foundation-float-classes;
    @if $flex { @include foundation-flex-classes; }
    @include foundation-visibility-classes;
    @if $prototype { @include foundation-prototype-classes; }
}

@import '../global';

我正在像这样导入我的组件，但这太重复了

///Home.scss///

@import '../assets/foundation/Foundation.scss';
@include foundation-everything;

---

您可以在

index.js

文件中导入，这样每个组件都可以使用样式。@ravibagul91我尝试过导入（导入）。/assets/foundation/foundation.scss'）在我的组件SCS文件中，如果您在<代码>索引> js<代码>文件中导入，则没有定义的变量错误。

index.js

文件，因此每个组件都可以使用样式。@ravibagul91我尝试导入（导入）。/assets/foundation/foundation.scss'）在我的组件SCS文件中，如果您在<代码>索引> js<代码>文件中导入，则没有定义的变量错误。