Question

我想知道在索引HTML中是否有任何加载或限制特定CSS的欲望。

问题场景：

我使用的是角度4，在这里我将组件分开为管理员和用户组件。这两个组件都使用自己的CSS。但是问题是当我在index.html中包含'admin.css'和'user.css'时，两者都合并了，并给了我一些丑陋的UI。我只想在用户指向用户的URL时显示包括“ user.css”，而在用户指向管理URL的情况下仅显示管理员的情况，则应该加载“ admin.css”给我一个建议或解决这个问题的方法。

预先感谢

Answer 1

首先-使用Angular 4-为每个组件包括.css文件的最佳实践。

我的意思是：

您有一个组件user.ts，因此您应该在该组件中包括用户样式，不要在index.html

示例：

user.ts代码：

@Component
....
styles: ['h1 { font-weight: normal; }']

或

@Component
....
styleUrls: ['./user.css']

那将隔离您的样式。正如它在Angular文档中所说的：

在Angular中，默认情况下，当您将CSS直接附加到组件时，我们将css的作用域限定为该组件。此作用域将其与应用程序的其余部分隔离。此附加功能意味着可以通过两种方式将CSS与Angular结合使用。

Answer 2

如果您使用sass并为用户和管理员组件创建类标志，那就更好又容易像这样

主题/_user.scss

.user { 
  label { 
    color:red;
  }
}

主题/_admin.scss

.admin { 
  label {
    color:green;
  }
}

这是主要样式。scc

@import "theme/_user.scss";
@import "theme/_admin.scss";

注意：_user.scss将具有user.css中的所有样式这对于提高应用程序性能要好得多，您将拥有一个包含用户和管理员样式的样式文件

stackblitz example

角负载css部分

2 个答案: