How to use SASS/SCSS in angular application

Question

I am trying to build a color theme functionality in angular2 application using sass. My header.component.scss file is:

$head-color: #f11;
h1{
    color: $hea         


        

Answer 1

In my own project this is what I used.

form-automobile.component.ts

@Component({
    selector: 'form-automobile',
    templateUrl: './form-automobile.component.html',
    styleUrls: ['./form-automobile.component.scss'],
})

form-automobile.component.scss

$myuglycolor: lime;

label {
    width: 100%;
    background-color: $myuglycolor
}

webpack.config.common.js

{
    // Load component styles here. When loaded with styleUrls in component, array of string of styles is expected.
    test: /\.scss$/,
    exclude: /node_modules/,
    loader: ['css-to-string-loader','css-loader','sass-loader']
}