Angular CLI 在库构建中包含样式表 scss 文件

Posted 2023-02-27

【中文标题】Angular CLI 在库构建中包含样式表 scss 文件

【英文标题】：Angular CLI Include style sheet scss file in library build

【发布时间】：2018-08-21 13:51:43

【问题描述】：

我正在按照这些示例创建可重用的库。

https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11

https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

当我运行 ng build library-name 时，我没有在 dist/library-name 文件夹中获得 *.scss 文件。如何在构建中包含样式表？

一些有用的帖子

https://github.com/angular/angular-cli/issues/11071

https://github.com/angular/angular-cli/issues/11317

https://github.com/dherges/ng-packagr/issues/839#issuecomment-386791207

【参考方案1】：

您可以使用 gulp 构建组件并将其发布到 npm 存储库。 步骤如下：

在 tsconfig.json 中定义构建路径

库组件需要打包到lib目录下。 编写一个 gulp 任务来构建组件。 （例如 gulp 命令：gulp build） https://www.npmjs.com/package/gulp-build 运行“gulp build” 通过这种方法，我们可以发布与相关库组件捆绑在一起的 .scss 文件。

【讨论】：

谢谢。我会试试你的建议。

【参考方案2】：

样式作为 javascript 代码添加到库包中。除非您禁用所有组件的所有视图封装，否则 WebPack 将创建一个静态 css 文件。

【讨论】：

谢谢。所以我对其中一个组件进行了跟踪，但仍然看不到 scss 文件。你看到这里有什么问题吗： import ViewEncapsulation from '@angular/core';封装：ViewEncapsulation.None

@ProgSky 尝试构建生产环境。

嗯。我试过 ng build library-name --prod 仍然没有。我想我将不得不对此进行更多研究。不过感谢您的帮助。

它曾经以这种方式工作。我知道他们已经改变了很多 webpack 在 Angular 6 中的工作方式。

看起来他们在 Angular 6 中打破了对此的支持。github.com/angular/angular-cli/issues/10869

【参考方案3】：

您可以在 package.json 中编写构建脚本，将样式文件复制到 dist/lib 文件夹中的文件夹中（可能使用像“cpx”这样的复制包）