angular - 将 node_modules 中的 css 文件加载到具有 webpack 的 Angular 组件中

Question

我有两个模块: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:我提到的项目结构很短，以便更好地理解。

Answer 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 以便其子组件也可以应用此样式。