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!

You can import any file into your angular.json "styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css"] — Ben Racicot
– Ben Racicot, Commented Mar 9, 2023 at 22:04

Serkan KONAKCI · Accepted Answer · 2021-01-22 22:40:21Z

18

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

edited Jan 22, 2021 at 22:40

answered Jan 22, 2021 at 22:08

Serkan KONAKCI

1,42017 silver badges18 bronze badges

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

1 Comment

Tony Smith Over a year ago

We have it set up this way as well but I am having trouble with SCSS changes triggering --watch. It LOOKS like the library recompiles but the dist folder isn't getting the changes. Did your solution work with watch?

Code Guru · Accepted Answer · 2019-01-10 07:11:58Z

11

Till the date (10-Jan-2019, there is no direct support for global scss in the library even though this is a very common scenario.

From this discussion, I got the workaround that I need to bundle it myself. So I used scss-bundle to create one big scss file. You can add it using

yarn add scss-bundle@next -D

and then the script to bundle and run in watch mode

"build-lib-watch-styles": "scss-bundle -e \"./projects/lib-name/src/lib/styles/lib-name.scss\" -d \"./dist-lib/lib-name/styles/lib-name.scss\" -w \"./projects/lib-name/src/lib/styles\"",

answered Jan 10, 2019 at 7:11

Code Guru

15.8k31 gold badges147 silver badges214 bronze badges

Collectives™ on Stack Overflow

Using SCSS with angular library created using angular-cli

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related