How to create component with scss files in library angular

user_16272390 0
Viewed 3273

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.

enter image description here

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"
}
angular sass shared-libraries
2 Answers

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']
})
user_83273830 
ng g c "filename" --style=scss

This is the best way I found actually.

user_187431450
Related