How to include a custom SCSS theme? (Add standalone stylesheet files to packages)

Type of Issue

[ ] Bug Report
[x] Feature Request
[x] Documentation Request/Question

Description

I have an existing component library that includes a SCSS theme, similar to what Angular Material does. I’m currently using Gulp+Rollup to build that library, and I’ve basically copied what Angular Material does in order to get my theme to be bundled and distributed inside the package. I’m using the scss-bundle package to bundle/generate a single theming file, and copying the result to the dist folder.

Is there any way to accomplish that using ng-packagr? I first tried adding a secondary module, but since there is no JS/TS code involved in the theming, it’s not going to pick it up.

How To Reproduce

Expected Behaviour

Version Information

ng-packagr: v1.4.1
@angular: v4.4.6

[rpd10]

I was able to get it working very simply using scss-bundle. Here’s what I did:

1. yarn add -D scss-bundle
2. Add a scss-bundle.config.json at the root, next to package.json

{
  "entry": "./src/lib/theming/_all-theme.scss",
  "dest": "dist/_theming.scss"
}

1. Update package.json scripts to modify the build target and add a target for bundling:

...
"build": "ng-packagr -p ng-package.json && yarn bundle-styles",
"bundle-styles": "scss-bundle -c scss-bundle.config.json"
...

Voila, running yarn build will create the package and then spit out the bundled scss into the dist directory alongside the package.

[FirstVertex]

I dislike these solutions involving a post build step. None of this can be applied when using ng build --watch=true Developer workflow with HMR goodness is lost. We need a built-in way to copy scss to dist without the post build hack.