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

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

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

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

Answer 2

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

Answer 3

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