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

[rpd10]

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

[ar-arkhipov]

Not sure if it will work, but you can try to create custom directive which will apply css to the element. Then place that directive on root element in your app.

[DavidParks8]

scss-bundle is what I use after running ng-packagr. I've set it up to bundle all non-component scss files into one, just like angular material2.

[ar-arkhipov]

@DavidParks8 could you please make a short example of your configuration when using css-bundle with ng-packagr?

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

3. 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.

[dherges]

Hi, exactly, that looks good!

If you ask me, that ios stoll the recommended way, see #123 (comment)

as well as: #216

[ronnyek]

I don't know if that scss-bundle is really rudimentary or what... it just grenades on parsing reasonably large sets of scss... hmm

[vivitali]

I've written small package similar with scss-bundle, but there I analyze all files by the mask, find all imports inside and concatenate into one file. So I don't need one entry point

"script": {
      "postbuild": "npm run themes",
      "themes": "bundle-scss -m \"./src/**/*.theme.scss\" -d \"./dist/themes.scss\""
    }

[rpoconn]

This solution now doesn't work due to the .tgz that 3.4.1 now does. Should I open a new bug or can this be reopened?

[mattmutt]

Will ng-packagr allow for SCSS compilation to occur during the library generation workflow? Having to go figure out an external tool like bundle-scss seems counter intuitive. Or if it is desired to keep such dependencies such as node-sass out of the picture, then shouldn't there be hooks in ng-packagr config to allow additional processing to occur prior to generating the dist.tgz ?

[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.

[ghost]

@hughanderson4 Have you found a solution to the problem? I think I have to do it with this postbuild hack.

[Splaktar]

Thank you @rpd10. I was able to implement something very similar in https://github.com/DevIntent/dev if anyone wants to look at a working example.

[lppedd]

Any news on this? Hacks are never okay for production.

[jsdevtom]

This is how angular material does it: https://github.com/angular/components/blob/8.0.x/src/material/BUILD.bazel#L27

[JayChase]

If this is helpful to anyone using the comments on here I managed to get an Angular Material themeable component library working. I wrote up some notes on it along with a sample here.

[github-actions]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
_{This action has been performed automatically by a bot.}