Using SCSS with angular library created using angular-cli

Question

I have created an angular library project where I want to use SCSS for styles.

So I have configured

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

and this made an entry to angular.json file

"schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
}

Now I am using materialize-css UI library in my library components. And it requires to import its SCSS file.

I am not seeing styles.scss file where I can import this and my components and other common styles?

I tried creating one and making entry into angular.json

"styles": ["projects/library_name/styles.scss"]

Under projects -> library_name -> architect -> build -> options

but this is showing error while building the library project

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(styles).

Update

I got this, addressing the same issue if it helps!

Serkan KONAKCI Serkan KONAKCI · Accepted Answer · 2021-01-22T22:08:36

I know it was late but, maybe help with somebody's idea.

Create style.scss in the library which the same path with the ng-package.json.
Open ng-package.json
Add assets:["style.scss"] property
run ng build @your-library-name --prod
You will see style.scss in your dist/@your-library-name.
Then it is importable

_{ng-package.json}

{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../../dist/logo-software/accordion",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "whitelistedNonPeerDependencies": [
    "@logo-software/theme"
  ],
  "assets": [
    "style.scss"
  ]
}

If you want to use this style.scss in your current library: Add encapsulation: ViewEncapsulation.None to the top main @Component of your library.

_{accordion.component.ts}

@Component({
  selector: 'logo-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class AccordionComponent implements OnInit {}

And the last thing you can use now this style.scss at any component.

_{accordion.component.scss}

// `@import "~@logo-software/theme/style";` for external import

@import "../../style"; // path to the style.scss file

:host{
}

Using SCSS with angular library created using angular-cli

2 Answers