如何在 Angular 应用程序中制作 CSS 的额外副本答案

【问题标题】：how to make an extra copy of css within angular app如何在 Angular 应用程序中制作 CSS 的额外副本
【发布时间】：2021-05-31 06:37:01
【问题描述】：

我们有一个 Angular 应用程序，它允许我们预览报告，该报告由各种组件组成，每个组件都有与之关联的 scss 样式表。构建应用程序时，它会将这些样式信息放在 .js 文件中。

我们希望能够在需要纯 CSS 的 PDF 生成过程中使用这些相同的样式。有没有办法让 Angular 继续做它目前正在做的事情，但也可以将这些样式复制到另一个位置的 .css 文件中？

我们使用的 Angular 版本是 8.2.14。

【问题讨论】：

标签： css angular

【解决方案1】：

基本上，您需要 Angular CLI 或 Webpack 将 CSS 提取到您可以访问的文件中。有几种方法可以做到这一点（无论如何我都不是 Angular 专家），但这些可能会有所帮助：

和

【讨论】：

【解决方案2】：

我认为我们找到了一种方便的方法来实现这一点。我们继续允许应用使用默认的 js 方式打包样式，但我们也做了以下工作：

首先我们将“--extract-css”标志添加到我们的 ng build 命令中。

然后，在 styles.scss 文件中，我们分别添加每个组件的 scss 文件，如下所示：

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

构建应用时，我们会看到组件的样式出现在 main.css 文件中 - 以及应用使用的 .js 版本中。

【讨论】：