18

At Codelyzer test file I saw SCSS beeing used in a styles inline template. Is it possible to enable it with Angular CLI?

My SCSS setup is working when using styleUrls but not for direct styles component decorator property.

Update:

I am using Angular CLI 1.0.0 with Angular 4.0.1

This is the error in shown in the WebStorm IDE

error in the WebStorm IDE

Vojtech
  • 2,756
  • 2
  • 19
  • 29
  • I imagine it would be available with a Webpack plugin -- if not now sometime in the future. That said, I don't think it is available in angular-cli at the moment. – Martin May 04 '17 at 11:06
  • would be nice to know the name of the plugin if there is a webpack plugin – bboydflo Oct 02 '19 at 08:30

2 Answers2

22

Support for inline SCSS in @Component decorator styles field is available from Angular v12

To enable in existing applications add "inlineStyleLanguage": "scss” to angular.json in the following sections

  • architect.build.options
  • architect.test.options

For a new Angular CLI project where scss is the selected style the inlineStyleLanguage configuration will default to scss

Drenai
  • 11,315
  • 9
  • 48
  • 82
  • 1
    can you use it in the template tho ? cause it looks like to me that it's only in the component definition `Starting in v12, Angular components will now support inline Sass in the styles field of the @Component decorator` – Crocsx May 18 '21 at 04:44
  • 1
    @Crocsx Updated answer to make it clearer – Drenai May 18 '21 at 13:24
4

Unfortunately, (at this moment) it is not possible. From the Angular documentation:

Style strings added to the @Component.styles array must be written in CSS because the CLI cannot apply a preprocessor to inline styles.

https://angular.io/guide/component-styles#non-css-style-files

Evelijn
  • 371
  • 2
  • 10