Angular CLI Include style sheet scss file in library build

2
votes

I am following these examples to create reusable libraries.

https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11

https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

When I run ng build library-name , I don't get *.scss file in the dist/library-name folder. How do I include style sheets in my build?

Some useful posts on this

https://github.com/angular/angular-cli/issues/11071

https://github.com/angular/angular-cli/issues/11317

https://github.com/dherges/ng-packagr/issues/839#issuecomment-386791207

3
angularangular-cliangular6

3 Answers

1
votes

The styles are added to the library bundles as JavaScript code. Unless you disable all view encapsulation for all of your components, then WebPack will create a static css file.

1
votes

You can use gulp for build and publish components to a npm repository. Followings are the steps:

  1. Define build paths in tsconfig.json

enter image description here

  1. Library components need to packaging under lib directory.
  2. Write a gulp task to build components. (e.g. gulp command : gulp build) https://www.npmjs.com/package/gulp-build
  3. Run 'gulp build'
  4. From this method we can publish .scss files bundle with the relevant library component.
1
votes

You may write build script in package.json that will copy the styles files to a folder in the dist/lib folder (probably with a copy package like 'cpx')