TimFelix TimFelix - 12 days ago 10
Sass (Sass) Question

Include SASS variables in an angular2 component

I'm wondering if i can use sass variables in an agular 2 component. something like:

@Component({

selector: 'my-component',

template: `
<div>
<div class="test-div">test div 1</div>
</div>
`,

styles: [
`
@import "variables";

.test-div{
border: 1px solid $test-color;
}
`]

})


my file _variables.scss:

$test-color: green !default;


it seems whatever I try the sass variables arent recognised.
Any help much appreciated.

Answer

Include styles from separate file.

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

Add _variables.scss file to component's folder and import it in questions.component.scss

@import 'variables';

.questions-filter{
  a {
    color: $green;
  }
}

It works well for me.