CODEWITHSUNDEEP
twitter-bootstrapangularsasswebpack
Weblurk
Weblurk

Reputation: 6812

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

Upvotes: 0

Views: 829

Answers (1)

Weblurk
Weblurk

Reputation: 6812

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.

Upvotes: 1

Related Questions