Reactjs SassError：已找到 @import 循环答案

【问题标题】：Reactjs SassError: An @import loop has been foundReactjs SassError：已找到 @import 循环
【发布时间】：2021-08-25 17:36:49
【问题描述】：

我正在使用Reactjs 作为frontend library 创建一个项目，我还使用sass 进行样式设置。我的项目中有各种sass 文件。两个主要文件是styles.scss 和color.scss。当我尝试在scss 文件之一中使用import color.scss 时，我遇到了这个问题。我想在我所有的scss 文件中使用color.scss

//style.scss

// vendors
@import "~bootstrap-scss/bootstrap.scss";
@import "vendors/font-awesome";
@import "vendors/themify";
@import "vendors/feather-icon";
@import "vendors/animate";
@import "vendors/owl.carousel.scss";
@import "vendors/slick.scss";
@import "vendors/slick-theme.scss";
@import "utils/helpers.scss";

//color
@import "./color.scss";
//base
@import "base/typography.scss";
@import "base/reset.scss";

// components
@import "components/buttons";
@import "components/tabs";
@import "components/msg";
@import "components/dropdown";
@import "components/chat-box";
@import "components/tootip";
@import "components/loader";
@import "components/switchery";
@import "components/collapse";
@import "components/call";
@import "components/call-list";
@import "components/according";
@import "components/tour";

//layout
@import "layout/grid.scss";
@import "layout/sidebar.scss";
@import "layout/content.scss";
@import "layout/dark.scss";
@import "layout/rtl.scss";
@import "layout/login";
@import "layout/forms.scss";
@import "layout/customizer.scss";

//pages
@import "pages/inner-pages";
@import "pages/landing";
@import "pages/inner-pages-responsive";
@import "pages/landing-responsive";
@import "pages/landing-page";
@import "pages/react_plugin";

// themes
@import "themes/admin.scss";
@import "themes/theme.scss";
@import "themes/responsive.scss";

// ReactToastify
@import "~react-toastify/dist/ReactToastify.css";
@import "~react-datepicker/dist/react-datepicker.css";

// ToolTip
@import "~react-tippy/dist/tippy.css";

// Image gallery
@import "~react-image-lightbox/style.css";

//color.scss

@import "utils/variables.scss";
@import "style";
@import "vendors/slick";
@import "vendors/slick-theme";
html {
    &.style1 {
        $primary-color :#3a62b8;
        $primary-light: #f6f7fa;
        $gray1 : #e4e7ef;
        @import "style";
    }
    &.style2 {
        $primary-color :#064c3c;
        $primary-light: #f4faf9;
        $gray1 : #e1f1ee;
        @import "style";
    }
    &.style3 {
        $primary-color :#9b4aff ;
        $primary-light:#faf8fc;
        $gray1: #f4effa;
        @import "style";
    }
    &.style4 {
        $primary-color :#00d3cb;
        $primary-light:#ebfafa;
        $gray1: #daf6f5;
        @import "style";
    }
    &.style5 {
        $primary-color :#ff5b92 ;
        $primary-light:#f8f5f6;
        $gray1 : #faebf0;
        @import "style";
    }
    &.style6 {
        $primary-color :#ff803c ;
        $primary-light:#fff9f5;
        $gray1 : #faeae0;
        @import "style";
    }
}

enter image description here

【问题讨论】：

标签： css reactjs sass

【解决方案1】：

嗯，我认为原因很清楚。观看color.scss 的第二行。你会发现你正在那里导入style.scss。这可能是@import 循环的原因

【讨论】：

sirius：现在我没有在我的style.scss 中导入color.scss 。但是它抛出另一个错误SassError: Undefined variable: "$light-color". 这个光在我的另一个scss.file 中
首先尝试重新启动项目。其次，试试这个简单的技巧。注释所有导入并一一启用。你可以在上面找到。