TimFelix TimFelix - 10 months ago 81
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:


selector: 'my-component',

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

styles: [
@import "variables";

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 Source

Include styles from separate file.

  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';

  a {
    color: $green;

It works well for me.