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

Posted

技术标签:

【中文标题】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”这样的复制包)

【讨论】:

以上是关于Angular CLI 在库构建中包含样式表 scss 文件的主要内容,如果未能解决你的问题,请参考以下文章

在 Angular 2/Angular-CLI 中将 CSS 排除在 JS 之外

SassError:找不到要导入的样式表。 @use '~@angular/material' 作为垫子;

使用 angular-cli 进行 CSS 编译

将字体导入 Angular 4 cli Web 应用程序的最佳实践/样式

如何在 Chrome 开发人员工具中将 CSS 样式更改保存到 ANGULAR 2.0 组件表单?

在Angular2中为组件加载多个样式表