Weblurk Weblurk - 15 days ago 5
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

1980px


My
app.component.ts
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
./src/app/shared/styles/_variables
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

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.

Comments