如何在角JS中包括模块级CS

Question

我的角度项目由前端和管理组成。我想以一种在管理员和前端使用不同的CSS的方式扩展项目。

我项目的结构如下：

--app
   --admin // Admin Module
     --admin.module.ts
     --admin.component.ts
     --admin-routing.module.ts
     --admin.component.css
     --admin.component.html
  --web // Frontend Module
     --web.module.ts
     --web.component.ts
     --web-routing.module.ts
     --web.component.css
     --web.component.html 
--app.module.ts
--app.component.ts
--app-routing.module.ts
--app.component.css
--app.component.html

我已将CSS定义为> .angular-cli.json file。

的CSS（前端）

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

如何为管理员和Web加载不同的CSS文件？此外，还有更好的方法可以在同一项目中包括多个模块吗？

Answer 1

您可以定义Admin和"styles.css"文件中剩余用户常见的全局CSS属性以及Admin exter＆amp;剩余的用户特定的CSS属性可以分别在admin.component.css和web.component.css中定义；希望这有帮助

Answer 2

如果每个模块都有一个主组件，则只需将.css文件附加到@component（）装饰器中的组件。

@Component({
    templateUrl: './admin.component.html'
    styleUrls: ['./admin.component.css']
})

---

@Component({
    templateUrl: './web.component.html'
    styleUrls: ['./web.component.css']
})