css - Reactjs SassError:已找到 @import 循环
问题描述
我正在创建一个使用Reactjs
as a的项目frontend library
,我也sass
用于样式设置。我的项目中有各种 sass 文件。两个主要文件是styles.scss
和color.scss
。当我尝试import color.scss
在其中一个scss
文件中时,我面临这个问题。我想color.scss
在我所有的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";
//颜色.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";
}
}
解决方案
嗯,我认为原因很清楚。看第二行color.scss
。你可以发现你正在style.scss
那里导入。这可能是@import
循环的原因
推荐阅读
- java - 使用列表填充 Java FX 组合框
- c++ - 在没有线程的情况下构建 Boost ASIO
- html - 具有边框半径的 div 和边框之间的透明空间
- java - spring security oauth2 JWT 刷新令牌返回“身份验证失败:invalid_token 无法将访问令牌转换为 JSON”
- javascript - React:单击按钮后如何刷新表中的数据
- ef-core-2.2 - 自有实体集合使用
- c# - 使用自定义 IdentityUser 类时出错
- javascript - 控制或拆分数组中字符串中`:`前后的目标和值
- python - 如何从扫描的图像中裁剪黑角?
- javascript - 选择禁用选项时,选择的值是多少?