Реагировать - импортировать css / sass по порядку

Question

Я пытаюсь импортировать мои css / sass файлы по порядку. Каким-то образом мой css испортился при импорте фреймворка bulma, переписав все классы, которые появятся позже.

require("./index.scss");

в моем index.scss i Сначала импортируйте bulma (framerwork), а затем - entryPoint.scss, который импортирует другие файлы sass / css из каталога assets.

@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. Все классы в "помощнике" перезаписываются основными классами в структуре bulma.

Есть идеи? Я использую сценарий создания-реакции-приложения npm.

Answer 1

Какие классы переопределяются? Я догадываюсь, что вы пытаетесь конкурировать с классами Булмы, которые отмечены важным правилом. Если вы намереваетесь переопределить эти классы в более позднем файле, вам также необходимо пометить их как !important. Как это ни печально, я бы не стал разбрасываться важным правилом, если в этом нет абсолютной необходимости, поскольку его легко неправильно использовать.

В вашем случае я бы попробовал следующее:

index.scss

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

helpers.scss

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