-1

We have an angular app that allows us to preview a report, which is made up of various components, each of which have scss stylesheets associated with them. When the app is built, it puts those styles info .js files.

We're hoping to be able to use those same styles for a PDF generation process that needs pure CSS. Is there a way to keep Angular doing what it's currently doing, but to ALSO copy those styles to a .css file in another location?

The angular version we're using is 8.2.14.

Erich
  • 499
  • 1
  • 13
  • 34

2 Answers2

0

Basically, you need Angular CLI or Webpack to extract the CSS to a file that you can access. There are a couple of ways to do this (I'm not an Angular expert by any means) but these might help:

Is it possible to build separate CSS file with angular-cli?

And

https://stackoverflow.com/a/41234241/6268914

Bryce Howitson
  • 7,339
  • 18
  • 40
0

I think we found a convenient way to accomplish this. We're continuing to allow the app to use the default js way of packaging the styles, but we've also done the following:

First we added the "--extract-css" flag to our ng build command.

Then, in the styles.scss file, we are adding each component's scss file individually, like this:

 @import "app/pages/report/pdf/report-preview/report-preview.component";

When the app is built, we're seeing the styles from the components appearing in the main.css file - as well as in the .js versions that the app is using.

Erich
  • 499
  • 1
  • 13
  • 34