html - Bulma Override 变量

问题描述

我正在使用创建一个网站webpack，并使用了一个来自bulma. 我正在尝试更改磁贴的基本格式，例如背景颜色、磁贴大小等，但我正在努力寻找一种方法来覆盖 bulma 的默认设置。

我遵循了一个 YT 教程，创建了一个mystyle.scss包含要覆盖的变量（颜色、字体等）的文件。这.scss位于我的 dist 目录中的一个sass文件夹中，我试图将它添加到@imports使用 Bulma 框架的 sass 文件中，这应该覆盖 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;
}

标签： htmlcsswebpackbulma

听起来像一个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 -->

html - Bulma Override 变量

问题描述

解决方案

推荐阅读