如何在角JS中包含模块级CSS

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

我在.angular-cli.json文件中为web(前端)定义了CSS。

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

如何为管理员和web加载不同的CSS文件？另外，是否有更好的方法在同一个项目中包含多个模块？

Answer 1

您可以在"styles.css"文件中定义对管理和剩余用户都常见的全局css属性，并且可以分别在admin.component.css和web.component.css中定义特定于管理和保留用户的css属性；希望这会有所帮助。

Answer 2

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

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

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