ReactJS项目Sass编译报错：检测到@import循环引入问题咨询

问题原因 #

你当前的导入逻辑形成了闭环：

• style.scss 第11行导入了./color.scss
• color.scss 第2行直接导入了style，同时每个主题样式块内也重复导入了style，两个文件互相无限引用，触发Sass循环导入报错。

修复方案 #

你的需求是做多主题变量切换，只要调整样式结构打破循环即可：

第一步：拆分样式文件 #

把style.scss的内容拆为两类独立文件：

1. 新建style-common.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";

// base静态样式
@import "base/reset.scss";

// 第三方库样式
@import "~react-toastify/dist/ReactToastify.css";
@import "~react-datepicker/dist/react-datepicker.css";
@import "~react-tippy/dist/tippy.css";
@import "~react-image-lightbox/style.css";

2. 新建style-themable.scss，存放所有需要用到$primary-color等主题变量的业务样式：

@import "base/typography.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";

第二步：修改color.scss导入逻辑 #

删掉所有对style的导入，替换为新拆分的文件：

@import "utils/variables.scss";
@import "style-common.scss";
@import "vendors/slick";
@import "vendors/slick-theme";

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

第三步：调整全局样式入口 #

废弃原来的style.scss，把项目全局样式入口直接改为引入color.scss即可，其他零散scss文件如果需要使用变量，直接导入utils/variables.scss，不要导入color.scss避免重复加载全量样式。

内容的提问来源于stack exchange，提问作者Wani