Problems editing bootstrap variables

Asked

Viewed 276 times

1

I am doing a project and I am using bootstrap 4 with scss I am creating a form using the classes of the framework itself:

<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 these elements I opened the file _variables.scss bootstrap and copied input variables to another variable file that I created to not overwrite the ones from the framework itself:

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

however it does not work realize that I added the color Lime in the background of my input but it does not change remains white that is the standard bootstrap color anyone knows why? I thought it was the file order css the more it is in first as shows the image below inserir a descrição da imagem aqui my scss app. inserir a descrição da imagem aqui

my variables.scss inserir a descrição da imagem aqui

console rendering: inserir a descrição da imagem aqui

bootstrap-4 scss
  • 1

    Your new variables that you want to overwrite Bootstrap’s are in the app.css?

  • @hugocsl are actually in a file called variables.scss I’m leaving apart for better organization

  • 1

    Dude you gotta see how you’re compiling this.... The important thing is that your new variables do not come first than Boostrap’s and yes After Bootstrap’s.

  • I will post a print of my app.scss file and my variables.scss file

  • edited the question at the end insert the prints of my app and variable scss files and my css style is being imported after bootstrap.css

  • 1

    In the Chrome Devtools Source tab it looks like your CSS is being rendered I think it will be better for you to get the doubt out, but it’s probably the order he calls the classes when he compiles. You can try to put ! Mportant tb that can solve.

  • Friend added the console print the question if you can take a look is what I wanted to see ?

  • Kirito what I meant was that its variables are being compiled within one of these CSS, so you said that within the css of Bootstrap itself. You have to open these rederized CSS in the Browser and identify the order of variables within the . css that is generated and read by the browser.

  • @hugocsl friend I saw here and he is not generating these variables in css I updated the console screen for you to take a look at everything I put in my variable.scss file he changed in case the tags of media queries as you can see but the variables of bootstrap it does not implemented because it will be ?

  • Hard to say, either he overwrote the variables, or he simply didn’t consider his variables.scss when compiling and dropping the .css. This might even be a compiler configuration that elects styles of equal names in different files... you’ll know :/

  • 1

    the problem is that the names are different one is _variables and mine is variables without the "underline"

Show 6 more comments

1 answer

0

In the bootstrap documentation you can see how they suggest it be your project structure, ie there it is said that you need a file custom scss. of which will contain your variables Sass customized.

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

I’ve made the same mistake using a file called scss variables. when I was migrating from bootstrap 3 to the 4.

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

You can import the full bootstrap, which I often find unnecessary, or you can import only the files that contain code used in your project.

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

Browser other questions tagged bootstrap-4 scss

You are not signed in. Login or sign up in order to post.