Angular Scss

• Szerző: Sallai András
• Copyright © Sallai András, 2022
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

style.scss

@import "~bootstrap/scss/bootstrap";

style.scss

/* You can add global styles to this file, and also import other style files */
$theme-colors: (
    "primary": navy,
    "secondary": gold
);
 
@import "~bootstrap/scss/bootstrap";

Az ng serve automatikusan fordít mentéskor.

src/app/app.component.html

<h1 class="bg-secondary">Valami</h1>

A böngészőben, google keresőbe:

• color picker

style.scss

/* You can add global styles to this file, and also import other style files */
@import "~bootstrap/scss/bootstrap";
 
h2 {
    background-color: $yellow-100;
}

A sorrend fontos.

Itt meg kell ismételni az @import sort:

src/app/app.componenet.scss

@import "~bootstrap/scss/bootstrap";
 
h2 {
    background-color: $indigo-300;
}

A következő példában egy sectitle nevű színt határozok meg.

style.scss

/* You can add global styles to this file, and also import other style files */
 
$theme-colors: (
    "primary": navy,
    "sectitle": gold
);
 
 
@import "~bootstrap/scss/bootstrap";

A szín felhasználása:

src/app/app.component.html

<h1 class="bg-sectitle">Valami</h1>