React - 按顺序导入 css/sass

Question

我正在尝试按顺序导入我的 css/sass 文件。不知何故，当我的 bulma 框架导入时，我的 css 变得一团糟，覆盖了以后的所有类。

require("./index.scss");

在我的 index.scss 中，我首先导入 bulma（框架），然后是 entryPoint.scss，它从 assets 目录中导入其他 sass/css 文件。

@import '~bulma/bulma';
@import 'app/assets/sass/entryPoint.scss';

还有我的 entryPoint.scss

@import "helper/_helper.scss";
@import "helper/_spacing.scss";
@import "global/global.scss";

不知何故，后来导入的类被 bulma 在我的 index.scss 中导入的主要类覆盖了。 “helper”中的所有类都被bulma框架中的主要类覆盖。

有什么想法吗？我正在使用 create-react-app npm 脚本。

Answer 1

哪些类被覆盖？我的预感是您正试图与标有重要规则的布尔玛课程竞争。如果您打算在以后的文件中覆盖这些类，您同样必须将它们标记为!important。很遗憾，除非绝对必要，否则我会避免放弃重要的规则，因为它很容易被滥用。

在你的情况下，我会尝试以下方法：

index.scss

@import "../node_modules/bulma/bulma";
@import "./helpers";

helpers.scss

.is-marginless {
  margin: 3em !important;
}