将来自node_modules的css文件加载到具有webpack的Angular组件中

Question

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

在“管理”部分中，我需要加载一些与FrontUI不同且仅特定于“管理”部分的.css文件。我尝试了以下-

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

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

2. 我在component.ts文件中添加了.css文件路径，如下所示，但这并未呈现css

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

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

PS：我提到的项目结构简短易懂。

Answer 1

谢谢乔纳森哈默尔。

我做到了以下几点：

admin.component.ts

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

admin.component.css

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

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