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 4 cli Web 应用程序的最佳实践/样式