Переменная Bulma Override - PullRequest
Новая
       6

Переменная Bulma Override

0 голосов
/ 13 февраля 2020

Я создаю сайт, используя webpack, и использовал плитку из bulma. Я пытаюсь изменить базовое c форматирование тайла, например цвет фона, размер тайла и т. Д. c, но я изо всех сил пытаюсь найти способ переопределить настройки Bulma по умолчанию для них.

Я следовал руководству по YT, создавая файл mystyle.scss с переменными (color, fonts et c) для переопределения. Этот .scss находится в моем каталоге dist, внутри папки sass, я пытался добавить его в @imports моих файлов sass, использующих каркас Bulma, это должно было переопределить переменные 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;
}

1 Ответ

0 голосов
/ 13 февраля 2020

Похоже, css проблема приоритета. Убедитесь, что ваш заказ правильный, иначе стили блюма всегда будут иметь приоритет 

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