Reactjs SassError: An #import loop has been found - css

Question

I am creating a project using Reactjs as a frontend library and i am also using sass for styling .I have various sass files in my project .The two main files are styles.scss and color.scss.When i am trying to import color.scss in one of scss file i am facing this issue.I want to use color.scss in all my scss files
//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

Answer 1

Well, I think the reason is really clear. Watch the second line of the color.scss. You can find that you are importing style.scss there. That might be the reason of the #import loop