Angular + Bootstrap style theme

Question

I'm using Angular 5 + Bootstrap 4, and I'm trying to make a style theme. I made something quite simple yet but it still doesn't work (doesn't compile).

src/style.scss :

@function theme($key: "primary") {
  @return map-get($theme-colors, $key);
}

$theme-colors: (
  "bg": #888,
  "bg-title": #555,
  "danger": #ff4136
);

* {
  background: theme("bg");
}

src/app/header/header.component.scss :

* {
  background: $theme("bg-title");
}

ERROR :

ERROR in ./src/app/header/header.component.scss
Module build failed:
  background: $theme("bg-title");
             ^
      Undefined variable: "$theme".
      in C:\Users\crelierj\projects\ba\bootang\src\app\header\header.component.scss (line 2, column 15)

webpack: Failed to compile.

I understand the problem, what I defined in style.scss isn't recognized in header.component.scss. But I don't know how could I do this ? I'd like to define some global functions and theme I could use in any components, and I tought style.scss was the way to do it.

Could someone tell me how to do it properly please ? Thanks.

ForestG · Accepted Answer · 2018-04-09 10:00:10Z

1

You need to reference the style.scss in your header.component.scss first:

  @import './src/style.scss';
  ...

answered Apr 9, 2018 at 10:00

ForestG

18.2k16 gold badges64 silver badges94 bronze badges

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

2 Comments

NeS Over a year ago

it worked perfectly, thanks, I had to remove $ in my scss and it was styles.scss but otherwise it's what I needed. Is there a way to automatically include it everywhere ? Or I'll have to import everytime.

ForestG Over a year ago

Yeah, I guess, but I have not tried it yet.

Collectives™ on Stack Overflow

Angular + Bootstrap style theme

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