css - React - 按顺序导入 css/sass

Question

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

require("./index.scss");

在我的 index.scss 中，我首先导入 bulma (framerwork)，然后导入 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";

我的 index.scss 中的 bulma 导入的主要类以某种方式被后来导入的类覆盖了。 “helper”中的所有类都被 bulma 框架中的主要类覆盖。

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

Answer 1

哪些类被覆盖了？我的直觉是你正试图与标有重要规则的 Bulma 类(class)竞争。如果您打算在以后的文件中覆盖这些类，您同样必须将它们标记为 !important。令人难过的是，除非绝对必要，否则我会避免抛出重要规则，因为它很容易被滥用。

对于您的情况，我会尝试以下操作:

index.scss

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

helpers.scss

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