How to create component with scss files in library angular

Issue

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"
}

Solution

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 By - funkizer