Override a component's default sass variables in a different angular-cli project

Question

In a node_module component I have a bunch of sass variables I want to override. For example, a variable in a component that has a !default rule:

$header-bg: red !default;

I want to override this variable in my global style sheet in my angular-cli project to blue.

Simply adding $header-bg: blue; does not work. What should I do to override those sass variables?

Edit: I tried doing the following.

I put the $header-bg: red !default; variable into a separate file called overridables.scss and imported that in my global stylesheet file and did like so:

$header-bg: blue;

@import "~mypackage/styles/overridables.scss";

This didn't work either.

Overriding default variables in Ionic can be done by simply adding the override to our variables.scss. How are they doing it?

Answer 1

Hi to edit component from node_modules, just import it and put in .angular-cli.json.

For example, suppose you want to modify bootstrap 4 variables.

1. Create new file src/assets/bootstrap/index.scss:

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/root";
...

this is only copy all file scss from bootstrap.

2. Create _variable.scss in src/assets/bootstrap

Because we want to update the default variable, we need create custom _variable.scss. just copy from node_modules/bootstrap/scss/_variables.scss

//
// Color system
//

// stylelint-disable
$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;

3. last include index.scss to .angular-cli.json:

"styles": [
  "styles.css",
  "assets/bootstrap/index.scss"
],

Now, every time when you want to overwrite default variable from bootstrap, just add to _variable.scss and variable default will change.