CODEWITHSUNDEEP
twitter-bootstrapangularsassangular-cli
hazmah0
hazmah0

Reputation: 263

override bootstrap variables angular-cli

I have an angular-cli project which I have added bootstrap-sass package. I have loaded the styles in angular-cli.json by adding this:

"styles": [
        "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss",
        "../node_modules/font-awesome/css/font-awesome.css",
        "styles.scss"
      ]

But I want to be able to override some of the variables that bootstrap has. How can I do this in a angular-cli project?

Upvotes: 4

Views: 3264

Answers (2)

JLS
JLS

Reputation: 41

It should work if you import bootstrap.scss to your main style.scss file in the following way.

@import '<RALATIVE_PATH_TO>node_modules/bootstrap/scss/bootstrap.scss';

Upvotes: -1

hazmah0
hazmah0

Reputation: 263

This was actually rather easy. If anyone has the same problem what I did was to include the following as global styles instead of loading styles via angular-cli.json:

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import './shared/styles/_variables'; // my custom vars that overrides bootstrap
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

Upvotes: 4

Related Questions