布尔玛覆盖变量 [英] Bulma Override variable

查看:26
本文介绍了布尔玛覆盖变量的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

我按照 YT 教程创建了一个 mystyle.scss 文件,其中包含要覆盖的变量(颜色、字体等).这个 .scss 位于我的 dist 目录中的 sass 文件夹内,我试图将它添加到我的 sass 文件的 @imports正在使用 Bulma 框架,这应该覆盖 bulma 的变量.不幸的是,代码无法编译,我尝试使用以下路径导入文件失败:

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

html:

<div><标题>联系我们

<div class="tile is-parent custom-tile" ><article class="tile is-child notification is-danger"><p class="title">联系我们</p><p class="subtitle">请在下面输入您的详细信息,我们将尽最大努力尽快回复您.如需咨询预约,请直接联系我们的手术室在提供的电话号码上.</p><div class="内容"><div class="field"><label class="label">Name</label><div class="控件"><input class="input" type="text" placeholder="e.g Alex Smith">

<div class="field"><label class="label">电子邮件</label><div class="控件"><input class="input" type="email" placeholder="例如alexsmith@gmail.com">

<div><div class="field"><label class="label">查询</label><div class="控件"><textarea class="query info-box" placeholder="请在此处输入您的查询"></textarea>

</文章>

</节>

CSS:

.custom-tile{背景色:蓝色($color:#000000);$body-background-color: #29b5ff;$hr-background-color: #29b5ff;}

解决方案

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

.class {背景:红色;}.class {background: green;}/* 我赢了 */

.class {background: red !important;}/* 我赢了 */.class {背景:绿色;}

@import "bulma.css"@import "mystyle.css"/* 我在使用相同的选择器时获胜 */

<link rel="stylesheet" href="mystyle.css"><!-- 使用相同的选择器时我赢了-->

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

解决方案

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

这篇关于布尔玛覆盖变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆