Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to enable SCSS inline template for angular component style with angular cli

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

like image 949
Vojtech Avatar asked Apr 03 '17 17:04

Vojtech


People also ask

What is the Angular CLI command to create a component using inline template and inline style?

you can use the cli "ng g c component-name -is -it" to create a component with inline styles and inline template.

How do I create a component with an inline template?

But when we want to generate component with inline template and style we have to provide two options after the above command. For inline templates, we need to add --inlineTemplate=true. By default its value is false. For inline style, we need to add --inlineStyle=true.


2 Answers

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

like image 151
Drenai Avatar answered Sep 26 '22 00:09

Drenai


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

like image 29
Evelijn Avatar answered Sep 26 '22 00:09

Evelijn