CODEWITHSUNDEEP
angularsassbootstrap-4
NeS
NeS

Reputation: 147

Angular + Bootstrap style theme

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.

Upvotes: 2

Views: 88

Answers (1)

ForestG
ForestG

Reputation: 18085

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

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

Upvotes: 1

Related Questions