CODEWITHSUNDEEP
angularsassshared-libraries
olivier
olivier

Reputation: 159

How to create component with scss files in library angular

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

Upvotes: 6

Views: 15771

Answers (2)

Dipankar Borah
Dipankar Borah

Reputation: 101

ng g c "filename" --style=scss

This is the best way I found actually.

Upvotes: 7

funkizer
funkizer

Reputation: 4907

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']
})

Upvotes: 15

Related Questions