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 · 16 comments
Closed

Comments

@rpd10
Copy link

@rpd10 rpd10 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
@ar-arkhipov
Copy link

@ar-arkhipov ar-arkhipov 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
Copy link
Member

@DavidParks8 DavidParks8 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.

@ar-arkhipov
Copy link

@ar-arkhipov ar-arkhipov commented Nov 13, 2017

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

@rpd10
Copy link
Author

@rpd10 rpd10 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.

@dherges
Copy link
Member

@dherges dherges 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 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
Copy link

@ronnyek ronnyek 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
Copy link

@vasinkevych vasinkevych 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
Copy link

@rpoconn rpoconn 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
Copy link

@mattmutt mattmutt 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 ?

@FirstVertex
Copy link

@FirstVertex FirstVertex 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.

@ghost
Copy link

@ghost ghost 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
Copy link

@Splaktar Splaktar 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
Copy link

@lppedd lppedd commented Jun 20, 2019

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

@jsdevtom
Copy link

@jsdevtom jsdevtom commented Jun 24, 2019

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

@JayChase
Copy link

@JayChase JayChase 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.

@github-actions
Copy link

@github-actions github-actions bot commented Jun 19, 2020

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.

@github-actions github-actions bot locked and limited conversation to collaborators Jun 19, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Development

No branches or pull requests