Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
rpd10 opened this issue Nov 10, 2017 · 15 comments

Comments

@rpd10
Copy link

commented Nov 10, 2017

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
@Tamango92

This comment has been minimized.

Copy link

commented Nov 12, 2017

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

This comment has been minimized.

Copy link
Member

commented Nov 13, 2017

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.

@Tamango92

This comment has been minimized.

Copy link

commented Nov 13, 2017

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

@rpd10

This comment has been minimized.

Copy link
Author

commented Nov 16, 2017

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.

@rpd10 rpd10 closed this Nov 16, 2017

@dherges

This comment has been minimized.

Copy link
Member

commented Nov 16, 2017

Hi, exactly, that looks good!

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

as well as: #216

@dherges dherges added the duplicate label Nov 16, 2017

@dherges dherges changed the title How to include a custom theme How to include a custom SCSS theme? (Add standalone stylesheet files to packages) Nov 16, 2017

@ronnyek

This comment has been minimized.

Copy link

commented Jan 26, 2018

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

@vasinkevych

This comment has been minimized.

Copy link

commented Feb 24, 2018

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 comment has been minimized.

Copy link

commented Mar 26, 2018

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

This comment has been minimized.

Copy link

commented Mar 31, 2018

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 ?

@hughanderson4

This comment has been minimized.

Copy link

commented Nov 14, 2018

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.

@felix-auer

This comment has been minimized.

Copy link

commented Nov 23, 2018

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

@Splaktar

This comment has been minimized.

Copy link

commented Jan 13, 2019

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

This comment has been minimized.

Copy link

commented Jun 20, 2019

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

@jsdevtom

This comment has been minimized.

Copy link

commented Jun 24, 2019

@JayChase

This comment has been minimized.

Copy link

commented Jul 10, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.