Weblurk Weblurk - 10 months ago 70
Sass (Sass) Question

How can I override bootstraps sass variables in an Angular 2 project which uses bootstrap-loader?

I've tried to include my variables before bootstraps, as many threads suggested, with no luck.

For example, I want to change the width of bootstraps largest screen breakpoint to


looks like this:

@import './src/app/shared/styles/_variables'; // My own variables
@import '~bootstrap-sass/assets/stylesheets/bootstrap/_variables';

The first file in that list, which is my own file
containing the ovverides look like this:

$container-large-desktop: 1980px;
$screen-lg-min: 1980px;

But the breakpoints for bootstraps largest screen still remain at 1200px.

I'm using an Angular2 seed project which uses Webpack, and I use bootstrap-loader npm package to load Bootstrap

Answer Source

Since, I'm using bootstrap-loader to load bootstrap, apparently a .bootstraprc file is created in the root of my application.

To override bootstraps default variables, I have to add the following in that file: preBootstrapCustomizations: ./src/app/shared/styles/_variables.scss

From the bootstrap-loader docs:

preBootstrapCustomizations: Customize Bootstrap variables that get imported before the original Bootstrap variables. Thus, derived Bootstrap variables can depend on values from here. See the Bootstrap _variables.scss file for examples of derived Bootstrap variables.