How to use Bootstrap SCSS functions in Angular component?

Question

I am having trouble understanding how to use certain Bootstrap SCSS functions within a Angular component, such as theme-color or color.

I have a component.scss that looks like:

.card {
  cursor: pointer;
  &:hover {
    background-color: theme-color("primary");
  }
}

But this doesn't work, without error may I add. If I prepend: @import '~node_modules/bootstrap/scss/bootstrap'; to the file it does, however, it doesn't take into account my global styling, it uses the default colours.

If I import only the functions SCSS then it doesn't understand the other imports, such as the ones that contain the vars, like $color.

Everything works fine when editing in my global styles.scss stylesheet.

It seems as though something about the view encapsulation is stopping global SCSS functions from Bootstrap filtering down to my component SCSS but I cannot quite find out what it is.

So, how do I get global SCSS functions, such as Bootstrap's into my individual component SCSS files?

Don't import the whole bootstrap Just import what you need: functions, variables and mixins. — JB Nizet
– JB Nizet, Commented Jul 27, 2019 at 21:24
@JBNizet it seems that if I just import functions then it doesn't recognise the colors variable, and I forgot to mention, that if I import that it doesn't use the colours I've applied in the global stylesheet, it only uses the default ones, it seems like I need to reimport the whole of styles.css — Sammaye
– Sammaye, Commented Jul 27, 2019 at 21:27
@JBNizet though having just tried that it seems it changes the import paths in such a way that non of the nested imports in my styles global sheet resolve anymore — Sammaye
– Sammaye, Commented Jul 27, 2019 at 21:28

JB Nizet · Accepted Answer · 2019-07-27 21:39:40Z

4

Here's how I do it.

In styles.scss:

@import 'custom-bootstrap';
// + custome global scss rules

In custom-bootstrap.scss

@import './common';
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
// + other imports copied from the standard bootstrap.scss file
// some of them being commented out because I don't need them

In common.scss

// potential bootstrap variable overrides here
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';

In any component scss file:

@import '../../common'; // the path may of course vary depending on the depth
// and here I can use any bootstrap (or custom) variable, mixin or function

answered Jul 27, 2019 at 21:39

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sammaye Over a year ago

Sweet, yep, that seems to work thanks, even thrown in my own _bootstrap-variables so I can get my full theme colouring now, is this is to do with view encapsulation? Is it isolating the component styles form the global symbol table, as such when I look for theme-color() it is working from a different symbol table?

JB Nizet Over a year ago

Yes an no. The component scss files are not just appended together and then compiled all at once. AFAIK, they're compiled separately, and each component has its own, separate CSS file. Then, at runtime, the view encapsulation itself is used to avoid having the standard cascading rules to apply.

Collectives™ on Stack Overflow

How to use Bootstrap SCSS functions in Angular component?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related