Html 布尔玛覆盖变量

我正在使用

webpack

创建一个网站，并使用了

bulma

中的一个互动程序。我正在尝试更改平铺的基本格式，例如背景颜色、平铺大小等，但我正在努力找到一种方法来覆盖bulma的默认设置

我遵循YT教程，创建了一个

mystyle.scss

文件，其中包含要覆盖的变量（颜色、字体等）。这个

.scss

位于我的dist目录中，在

sass

文件夹中，我试图将它添加到使用Bulma框架的sass文件的

@imports

，这应该覆盖Bulma的变量。不幸的是，代码无法编译，我尝试使用以下路径导入文件，但未成功：

@import "sass/mystyle.scss"
@import "../sass/mystyle.scss"
@import "src/sass/mystyle"
@import "../src/sass/mystyle.scss"
@import "mystyle.css"

html:

---

听起来像是css优先权的问题。确保您的订单正确，否则bluma样式将始终优先

.class {background: red;}
.class {background: green;} /* I Win */

请将您尝试过的代码编辑到问题中。我已将其添加到@Zerajust import your scs中，在bulma之后是什么意思？请发布html的

部分。

.custom-tile{
  background-color: blue($color: #000000);
  $body-background-color:   #29b5ff;
  $hr-background-color: #29b5ff;
}

.class {background: red;}
.class {background: green;} /* I Win */

.class {background: red !important;} /* I Win */
.class {background: green;}

@import "bulma.css" 
@import "mystyle.css" /* I win when using the same selector */

<link rel="stylesheet" href="bulma.css">
<link rel="stylesheet" href="mystyle.css"> <!-- I win when using the same selector -->