Customizing Boostrap with Sass; Where Exactly Should I Import Bootstrap in My SCSS File

customizing boostrap with Sass; where exactly should I import bootstrap in my scss file?

It's explained in the docs: https://getbootstrap.com/docs/5.0/customize/sass/#importing

Since you're not referring to any of the existing variables in your customizations, you just need to set changes before importing bootstrap to override the !default variables...

$form-range-thumb-width: 2rem;
$form-range-thumb-height: 2rem;
$font-family-base: 'Manrope';

@import '../node_modules/bootstrap/scss/bootstrap';

Also, I'm not able to repro the issue described with the $font-family-base. It works as expected: https://codeply.com/p/Rqx2vICKCr

where shall I put custom.scss file to customize bootstrap component?

It doesn't meter where is your file is. The point is to include your custom variables before variables from bootstrap.

You can create BS file, where you can include BS components and other elements and in this file you can override default variables.

More over, in this case you can optimize your target CSS file.

One more thing - in example I using BS5, in v4 approach the same (because it's SCSS).

Your structure:

.
└── scss/
    ├── _bs-variables.scss
    ├── custom-bootstrap.scss
    └── custom.scss

Example:

_bs-variables.scss:

$primary:       tomato;

custom-bootstrap.scss:

/*!
 * Bootstrap v5.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

// scss-docs-start import-stack
// Configuration
@import "~bootstrap/scss/functions";

// override default variables
@import "./bs-variables"; // here is your custom variables include
// default BS variables
@import "~bootstrap/scss/variables";

@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

// Layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
...

custom.scss:

@import './custom-bootstrap';

// other SCSS code
... 

How to extend/modify (customize) Bootstrap with SASS

Update 2022 (Bootstrap 5)

Generally speaking, customizing Bootstrap 5 SASS works the same way as it did in Bootstrap 4. However, some of the maps have changed (and new ones have been added) so you should follow the Bootstrap SASS documentation for details on how to add, remove or modify any of the maps.

Recent comments on this post indicate there's still some confusion about the order of customizations and imports. However, this concept hasn't changed...

"Variable overrides must come after our functions are imported, but before the rest of the imports"

Because of the way SASS variable defaults work, bootstrap ("the rest of the imports") should be imported AFTER any variable customizations/changes. Since your variable changes will not contain the !default flag, your changes will not be overridden by the Bootstrap defaults when bootstrap is imported at the end.

The proof is in the pudding

---

Here's how to override / customize Bootstrap 4 with SASS...

Overrides and customizations should be kept in a separate custom.scss file that is separate from the Bootstrap SASS source files. This way any changes you make don't impact the Bootstrap source, which makes changes or upgrading Bootstrap later much easier.

1- Consider Bootstrap's SASS folder structure, alongside your custom.scss...

|-- \bootstrap
|   |-- \scss
|   |   |-- \mixins
|   |   |-- \utilities
|   |   |-- bootstrap.scss
|   |   |-- variables.scss
|   |   |-- functions.scss
|   |   |-- ...more bootstrap scss files
|   custom.scss

2- In your custom.scss, import the Bootstrap files that are needed for the overrides. (Usually, this is just variables.scss. In some cases, with more complex cutomizations, you may also need the functions, mixins, and other Bootstrap files.). Make the changes, then @import "bootstrap". It's important to import Bootstrap after the changes...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* make changes to the !default Bootstrap variables */    
$body-color: green;
        
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

2a (optional) - Also, you can extend existing Bootstrap classes after the @import "bootstrap"; to create new custom classes. For example, here is a new .row-dark class that extends (inherits from) the Bootstrap .row class and then add a background-color.

 /* create new custom classes from existing classes */
 .row-dark {
    @extend .row;
    background-color: #333333;
    color: #ffffff;
 } 

3- Compile the SASS (node-sass, gulp-sass, webpack/NPM, etc..). The CSS output will contain the overrides! Don't forget to check the includePaths if your @imports fail. For a full list of variables you can override, see the variables.scss file. There are also these global variables.

Bootstrap SASS Demo on Codeply

In summary, here's how it works:

1_ First, when the custom.scss file is processed using SASS, the !default values are defined in the bootstrap/variables.scss. 

2_ Next, our custom values are set, which will override any of the variables that had !default values set in bootstrap/variables.scss. 

3_ Finally, Bootstrap is imported (@import "bootstrap") which enables the SASS processor (A.K.A. compiler) to generate all the appropriate CSS using both the Bootstrap defaults and the custom overrides.

For those that don't know SASS, try this tool that I made.

---

Also see:

How to get 15 columns in Bootstrap 4 in SASS CSS?

Bootstrap v4 grid sizes / Sass List

Customizing Bootstrap CSS template

Extending Bootstrap 4 and SASS

How do I import bootstrap-sass once and use it in several files?

Think you're mixing SCSS import with HTML CSS links. So this bit here is wrong:

<link rel="stylesheet" href="bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap-compass.scss" />
<link rel="stylesheet" href="styles/application.css">
<link rel="stylesheet" href="styles/intro.css">
<link rel="stylesheet" href="styles/admmin.css">

I assume this is from your built HTML file. Your HTML does not know what an SCSS file is. Your SCSS must be processed into a CSS file before it is usable in your final HTML file.

The way to import an SCSS file is to use that import command inside the parent SCSS file at the top. So if your main SCSS file is application.scss, then at the top of that, you import your other SCSS files:

@import "bootstrap";

But you need to make sure that the _bootstrap.scss file is in the same directory as your application.scss file for this import to work.

DRY approach in bootstrap-sass: should I import custom variables before or after _variables.scss?

This problem took me some time to puzzle out as well. Here's the solution I came up with.

To keep your SASS code modular, keep distinct separation between the two types of code - declarative and imperative. By declarative code I mean definitions of variables, functions, and mixins. By imperative code I mean style definitions (any code that will actually produce some output when compiled). Keep those kinds of code in separate files. You can then transparently declare dependencies (@imports) between files containing declarative code, because including declarative code multiple times will have no effect on the output.

Using the approach outlined above, split your "customized Bootstrap" into two files - bootstrap-declarations and bootstrap-styles (I actually split it into more files to keep variables separate from functions/mixins). Then @import the bootstrap-declarations from your application's variables without any hassle and declare your variables both before and after the @import as needed. In your application's imperative code (styles), @import your application's variables as the very first thing, before @import of bootstrap-styles, and you're all set.

Customizing bootstrap 3 sass

How about you make a .scss file that only consists of imports. You could call it style.scss. You'll only need to write import statements in this file. For example:

@import "bootstrap/bootstrap";
@import "font-awesome/font-awesome";

@import "myVariables";
@import "myMixins";
@import "myTemplate"

@import "navbar";
@import "header";
@import "footer";

The order in which you write the import statements determines what gets overwritten. If you set a variable in myVariables and import myVariables below Bootstrap, as in the example, then your variable will overwrite the Bootstrap variable. You'll also only have to compile this file (style.scss) into css.

How to customize bootstrap css when using bootstrap-sass

You should never modify Boostrap's original files. The best option is to override their classes with your own ones. You can do this by creating a css file in your assets/stylesheets folder, which will be included automatically in your app.

Order of importing when overriding variables of Bootstrap 5

The magic of Bootstrap is that all variables are declared as !default. (The library does, you shouldn't.)

Normally when you assign a value to a variable, if that variable already had a value, its old value is overwritten. But with Bootstrap, a Sass library, variables assigned by you will not overwritten if they were not declared !default.

See: https://sass-lang.com/documentation/variables#default-values

Generally speaking it does not really matter where you declare your variables as long as CSS is not generated yet - and if you've set variables, they will not be overridden.

Having said that - it's best practice to set yours after functions ... but before root and the other CSS generation SCSS.

The $utilities variable is the exception to that. If you declare a value to that you'll break the utilities/api CSS generation. Rather manipulate that map with the Utilities API (See https://getbootstrap.com/docs/5.0/utilities/api/) after you've also imported variables, mixins & utilities.

I suppose, looking at this with a different lens, the Bootstrap authors should be more consistent with their docs, or elaborate on inconsistencies - regardless, drop them an "issue" to let them know: https://github.com/twbs/bootstrap/issues

Overriding Bootstrap Sass variables not working when importing individual Bootstrap components

Assuming you're using Bootstrap 5 (as the docs show in the question). In order to rebuild all the utility classes after modifying the $spacers map, you need to @import "utilities" and "utilities/api"...

@import "functions";
@import "variables";
@import "mixins";

$spacers: map-merge(
    $spacers, (
        6: $spacer*5,
        7: $spacer*6,
    )
);

@import "utilities";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "utilities/api";

Demo on Codeply

This will let you import only the parts you want.

---

Related Topics