Angular CLI Generate Library with SASS

Question

I have an Angular6 app that I am trying to create a library for. I was able to generate a library project but when I generate the component for the library, Angular CLI is creating it with .css files.

How can I get it to create .scss files?

Here are the commands I'm using to create the project:

ng new example-app --style=scss
rename example-app example
cd example
ng generate library example --prefix=exam --style=scss
ng generate component test --project=example

The --style=scss option on the ng generate library command does not have an effect, I still get CSS files in my test component folder.

Unfathomable

Answer 1

You can fix it by overriding schematics for your project in your angular.json like in the example below:

"example": {
    "root": "projects/example",
    "sourceRoot": "projects/example/src",
    "projectType": "library",
    "prefix": "exam",
    "schematics": {
      "@schematics/angular:component": {
        "styleext": "scss"
      }
    },
 ....
}

or you can set this value via angular-cli like so:

ng config schematics.@schematics/angular:component.styleext scss

After that try to generate component, it should have scss extension.

EDIT (replace styleExt with style):

As per this closed ticket https://github.com/ngrx/platform/issues/2248 with new version of Angular CLI styleExt has been replaced with style - I tested it in two libraries that are using Angular anf Angular CLI versions 8.

Silicone