Question

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

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

我已经在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，以便其子组件也可以应用此样式。

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

1 个答案: