How to create component with scss files in library angular

Question

I created a scss app and associated a library. I want to create components with .scss files inside this library. But when I create a component inside the library, angular assigns it a css file automatically.

I created the application (named vega-libraries) with the scss option but not the library (polaris-common)

Here is a screenshot of the project with the tree view,I tried to change the css file of totoComponent in toto.scss as you can see in the screenshot.

But when I do that, it generates an error of this type:

Error: The loader "C:/Users/........toto/toto.component.css" didn't return a string.

How can I create components in my library with .scss files that work ?

Thank you for your help

EDIT :

 "polaris-common": {
      "projectType": "library",
      "root": "projects/polaris-common",
      "sourceRoot": "projects/polaris-common/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/polaris-common/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/polaris-common/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/polaris-common/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/polaris-common/src/test.ts",
            "tsConfig": "projects/polaris-common/tsconfig.spec.json",
            "karmaConfig": "projects/polaris-common/karma.conf.js"
          }
        }
      }
    }
  },
  "defaultProject": "vega-libraries"
}

what does the snippet of code in your angular.json look like for the lib? — pertrai1
– pertrai1, Commented Aug 3, 2021 at 17:23
Thanks for your nswer, I've edited my post with the snippet of angulr.json — olivier
– olivier, Commented Aug 3, 2021 at 17:28

funkizer · Accepted Answer · 2021-08-03 17:37:06Z

15

This is for Angular 12. In prior versions it might be different. To set up scss as the default style format when doing ng create component, in angular.json under your project, add schematics:

"projectType": "library",
"schematics": {
    "@schematics/angular:component": {
        "style": "scss"
    },

In an existing component, change styleUrls to reflect the path to your renamed scss file instead of css

// toto.component.ts

@Component({
  styleUrls: ['./toto.component.scss']
})

answered Aug 3, 2021 at 17:37

funkizer

4,9271 gold badge21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joel Over a year ago

can confirm, still works in angular 15 (feb 2023)

Suraj Rao · Accepted Answer · 2022-05-09 05:30:35Z

8

ng g c "filename" --style=scss

This is the best way I found actually.

edited May 9, 2022 at 5:30

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered May 9, 2022 at 5:22

Dipankar Borah

1111 silver badge3 bronze badges

1 Comment

Rich Over a year ago

I like this answer the most. I've referenced it more than once.

Collectives™ on Stack Overflow

How to create component with scss files in library angular

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related