19

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

2
  • 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 4, 2017 at 11:06
  • would be nice to know the name of the plugin if there is a webpack plugin
    – bboydflo
    Oct 2, 2019 at 8:30

2 Answers 2

23

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

1
  • 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, 2021 at 4:44
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

3
  • 1
    So I guess if I want to target the host element I have to use a separate file? Jul 10, 2019 at 4:38
  • No, :host{ ... } styles still work with component inline styles.
    – Trevor
    Jul 15, 2020 at 20:47
  • 1
    This answer is no longer true Dec 15, 2022 at 20:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.