Bulma Override 变量答案

【问题标题】：Bulma Override variableBulma Override 变量
【发布时间】：2020-05-29 13:59:40
【问题描述】：

我正在使用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:

<section class="contacts">
        <div>
            <title> Contact Us</title>
        </div>

        <div class="tile is-parent custom-tile" >
            <article class="tile is-child notification is-danger">
              <p class="title">Contact Us</p>
              <p class="subtitle">Please enter your details below, 
                  and we will try our best to get back to you as soon as possible.
                For enquiries about an appointment, please contact our surgery directly 
                on the telephone number provided.</p>

                <div class="content">
                <div class="field">
                    <label class="label">Name</label>
                    <div class="control">
                      <input class="input" type="text" placeholder="e.g Alex Smith">
                    </div>
                  </div>

                  <div class="field">
                    <label class="label">Email</label>
                    <div class="control">
                      <input class="input" type="email" placeholder="e.g. alexsmith@gmail.com">
                    </div>
                  </div>

                  <div>
                    <div class="field">
                        <label class="label">Query</label>
                        <div class="control">
                          <textarea class="query info-box" placeholder="Please enter your query here"></textarea>
                        </div>
                      </div>
                  </div>
              </div>
            </article>
          </div>
        </div>


    </section>

css:

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

【问题讨论】：

请将您尝试过的代码编辑成问题。
我已经添加到@Zera
在你的bulma之后导入你的scss
bulma之后是什么意思？
请张贴您的 html 的 <head> 部分。

标签： html css webpack bulma

【解决方案1】：

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

.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 -->

【讨论】：