Problems editing bootstrap variables

Question

Problems editing bootstrap variables

Navigation

#1 by (0 votes)

1

I'm working on a project and I'm using bootstrap 4 with scss I'm creating a form using the framework's own classes:

<form class="form-search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Digite o que está procurando" aria-label="Digite o que está procurando" aria-describedby="basic-addon2">
                                <div class="input-group-prepend">
                                    <span class="input-group-text icon-location"><a href="#"><i class="fas fa-crosshairs"></i></a></span>
                                </div>
                                <input type="text" class="form-control" placeholder="Em: São Paulo" aria-label="Em: São Paulo" aria-describedby="basic-addon2">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button"><i class="fas fa-search"></i>Buscar</button>
                                </div>
                            </div>
                        </form>

and then to edit those elements I opened the _variables.scss bootstrap file and copied the input variables to another variable file that I created not to overwrite those in the framework itself:

$input-bg:                              lime !default;
$input-border-color:                    transparent !default;
$input-box-shadow:                      none !default;

But it does not work, I realize that I added the lime color in the background of my input, but it does not change. It's still the default bootstrap color, does anyone know why? I thought it was the order of the file css plus it is in first as shown in the image below myapp.scss

Myvariables.scss

renderingonconsole:

bootstrap-4 scss

asked by anonymous 30.04.2018 / 16:39

1 answer

FullCalendar - Block drag and drop when creating new events My listing is taking a long time to load

score 0 · Answer 1

In the bootstrap documentation you can see how they suggest it to be your project, that is, there you are told that you need a custom.scss file that will contain your custom sass variables.

seu-projeto/ ├── scss │ └── custom.scss └── node_modules/ └── bootstrap ├── js └── scss

I've already made the same mistake of using a file named variables.scss when migrating from bootstrap 3 a> to the 4.

When importing the files from node_modules/bootstrap/scss remember to make your custom.scss file stay before any bootstrap files.

You can import the complete bootstrap, which you often find unnecessary, or you can import only the files containing codes used in your project.

PS: It's important to note that for variables to have an effect on the framework, it (the framework) needs to be part of your build , you can not import the compiled bootstrap and minified, and wait for it to recognize the changes in the values of the variables that have already been processed.