Question

我正在进行角度项目，包括前端和管理员。我想以这样一种方式扩展我的项目，即我为admin和frontend使用不同的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 文件中定义了我的CSS for web（前端）。

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

如何为管理员和网站加载不同的CSS文件？还有更好的方法在同一个项目中包含多个模块吗？

Answer 1

您可以在"styles.css"文件中定义管理员和其他用户共有的全局css属性，以及管理员特定的＆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']
})

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

2 个答案: