通过模块在 Angular 库中包含外部 CSS答案

【问题标题】：Include external CSS in an Angular library by modules通过模块在 Angular 库中包含外部 CSS
【发布时间】：2022-01-14 04:22:26
【问题描述】：

我正在开发一个基于引导程序的角度设计库，类似于ng-bootstrap

我目前为每个设计组件创建了多个模块，可以根据用户需求单独导入。

例如：

src/
  modules/
    inputs/
    buttons/
    navs/
    tooltips/
    ....

每个模块都可以独立导入并在应用程序中使用。

我面临的问题是 bootstrap scss。已解释here 我们可以导入所有引导程序

@import "../node_modules/bootstrap/scss/bootstrap";

或按块

@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

我希望我的每个模块都导入它们特定的 scss 文件。该表将导入表scss、导航、导航等...

由于引导文件是scss，因此需要在添加到页面之前对其进行编译，而在每个模块中手动添加stylesheet 元素的简单解决方案将不起作用。

在ng-bootstrap 中，他们要求用户手动添加他们希望使用的每个引导 scss，但这对用户来说可能是一种痛苦，因为他们需要手动添加模块和相关的样式。

是否有任何解决方案可以将 scss 文件绑定到模块，并在应用中使用该模块时对其进行编译？

【问题讨论】：

标签： css angular twitter-bootstrap webpack sass

【解决方案1】：

我将追随 Angular Material 实现的脚步，并为您的库用户提供有关如何包含设计库样式默认样式或自定义样式的说明。查看 Angular Materials 构建代码和作为 NPM 包提供的相应导出资产。本质上，要手动导入如上所述导入的每个模块的单个 SCSS 文件，用户需要采取以下步骤并了解样式将在全局范围内应用。在加载模块时，Angular 中没有动态包含和编译 SCSS，引擎盖下的块需要重新编译，并且样式将被再次预处理。

在angular.json下的“build.options”对象修改“styles”和“stylePreprocessorOptions”并更新配置指向新的全局样式目录“entry”比如"styles":["src/styles/styles.scss"], "stylePreprocessorOptions": { "includePaths": [ "styles" ] }然后在styles.scss导入你的引导 scss。在样式目录下，您现在可以创建自定义目录结构，角度编译器将能够找到全局“styles.scss”文件中导入的所有内容。进一步阅读：在基于组件范围样式与全局应用样式的视图封装应用样式的上下文中阅读 Angular 中的影子 DOM。

【讨论】：