Bulma Override variable

问题

I am creating a website using webpack, and have used a tile from bulma. I am attempting to change the basic formatting of the tile, such as the background colour, the tile-size etc, but I am struggling to find a way to override bulma's default settings for these.

I followed a YT tutorial, creating a mystyle.scss file with the variables (color, fonts etc) to override. This .scss is located in my dist directory, inside a sass folder, I tried to add it to the @imports of my sass files that are using the Bulma framework, this was supposed to override bulma's variables. Unfortunately, the code does not compile, I tried unsuccessfully importing the file using the following paths:

@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;
}

回答1:

Sounds like a css precedence issue. Make sure your order is correct otherwise the bluma styles will always take precedence

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

来源：https://stackoverflow.com/questions/60214975/bulma-override-variable

标签

html

css

Webpack

bulma