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

Question

我正在按照以下示例创建可重用的库。

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

Answer 1

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

Answer 2

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

1. 在tsconfig.json中定义构建路径

1. 库组件需要包装在lib目录下。
2. 编写一项gulp任务以构建组件。 （例如gulp命令：gulp构建） https://www.npmjs.com/package/gulp-build
3. 运行“ gulp构建”
4. 通过这种方法，我们可以发布包含相关库组件的.scss文件包。

Answer 3

您可以在package.json中编写构建脚本，该脚本会将样式文件复制到dist / lib文件夹中的某个文件夹中（可能使用“ cpx”之类的复制程序包）