Angular 5中如何在.angular-cli.json中添加CSS媒体查询？

Hey Naresh, 刚好我之前处理过类似的需求，Angular CLI其实支持在angular-cli.json（新版本Angular对应angular.json）的styles配置里直接指定媒体查询，不用非得在index.html里手动引用~

你只需要把原来的字符串格式样式路径，改成对象格式，每个对象包含input（样式文件路径）和media（媒体查询规则）两个属性就行。给你适配需求的具体示例：

"styles": [
  {
    "input": "dashboard-control/dashboard-panel.css",
    "media": "screen and (min-width: 1367px)" // 桌面端加载该样式
  },
  {
    "input": "dashboard-control/dashboard-panel-tablet.css",
    "media": "screen and (max-width: 1366px)" // 平板及更小尺寸加载该样式
  },
  "dashboard-control/dashboard-changes.css", // 无media属性，全局加载
  "styles.css" // 全局基础样式
],

配置完成后，Angular CLI构建项目时会自动生成对应<link>标签并带上指定的media属性，浏览器会根据当前屏幕尺寸自动加载匹配的样式表。

补充两个小提示：

• 如果你用的是Angular 6+版本，配置文件是angular.json，结构和旧版angular-cli.json类似，同样支持这种对象配置方式。
• 要是不想拆分多个样式文件，也可以在单个CSS里直接写媒体查询，但既然你明确需要加载不同样式表，上面的方法是最贴合需求的。

内容的提问来源于stack exchange，提问作者naresh mesineni