将 node_modules 中的 css 文件加载到具有 webpack 的 Angular 组件中答案

【问题标题】：Load css files from node_modules into an Angular component having webpack将 node_modules 中的 css 文件加载到具有 webpack 的 Angular 组件中
【发布时间】：2019-03-28 18:42:19
【问题描述】：

我有两个模块：FrontUI 和 AdminUI。 FrontUI 是根模块，AdminUI 是延迟加载的。

在 Admin 部分，我需要加载一些与 FrontUI 不同的 .css 文件，并且仅适用于 admin 部分。我尝试了以下 -

我已经在 angular.json 中添加了这些 .css 文件路径，如下所示，并且可以正常工作。但这会在启动过程中捆绑这些文件，这是不正确的

"styles": [
              "node_modules/@xyzPlugIn/base.css",
              "node_modules/@xyzPlugIn/theme.css"
            ],

我已经在component.ts文件中添加了.css文件路径如下，但这不是渲染css

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['../node_modules/@xyzPlugIn/base.css',
              '../node_modules/@xyzPlugIn/theme.css']
})

能否为两个单独的模块加载不同的样式，因为客户端/用户不同？在生产环境中，这些文件可以捆绑吗？

P.S：我提到的项目结构很简短，以便更好地理解。

【问题讨论】：

您可以在组件顶部添加导入 import '@xyzPlugIn/base.css';。如果您使用 scss，请将 @import "~@xyzPlugIn/base"; 添加到您的样式表中。另外，你确定你到 node_modules 的相对路径是正确的吗？
我尝试在组件中使用 import, @import 但它不适用于 .css 文件。是的，我的项目中的相对路径是正确的。
@import 将在您的样式表中（开头没有扩展名和波浪号）。 import 将在您的组件中（扩展名为 .css）。这两种我都用过好几次了。

标签： angular angular7

【解决方案1】：

谢谢Jonathan Hamel。

我通过以下方式实现了：

admin.component.ts

@Component({...
  styleUrls: ['./admin.component.css'],
  encapsulation: ViewEncapsulation.None
})

admin.component.css

@import "~@xyzPlugIn/base.css";
@import "~@xyzPlugIn/theme.css";

添加波浪号 '~' 表示 Angular 中的 node_module。
将封装设置为 ViewEncapsulation.None，以便其子组件也可以应用此样式。

【讨论】：

只想提一下ViewEncapsulation.None是个坏东西，违反了组件样式的原则。
如果组件是 Angular 库的一部分并且我发布了它 - 此路径不正确，因为在应用程序根目录而不是 node_modules 中寻找 css：https://localhost:4200/~@xyzPlugIn/base.css