如何在Angular 18中根据设备类型引用不同CSS文件？

1. 调整Angular配置，避免CSS强制合并 #

• 打开angular.json，找到projects.[你的项目名].architect.build.options.styles数组，只保留src/styles.css（用来放全局通用样式，比如重置样式、全局字体），把src/app/styles/desktop.css和src/app/styles/mobile.css从这个数组里删掉。
• 把这两个设备专属CSS设为静态资源，让Angular不打包合并：在同文件的assets数组里添加以下配置，确保构建时它们会被原封不动复制到dist根目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "desktop.css",
    "input": "src/app/styles/",
    "output": "/"
  },
  {
    "glob": "mobile.css",
    "input": "src/app/styles/",
    "output": "/"
  }
]

2. 确认动态加载逻辑的路径正确性 #

AppComponent里的动态加载代码要指向构建后的正确路径，示例代码如下：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    // 用userAgent判断设备类型
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    const cssFile = isMobile ? 'mobile.css' : 'desktop.css';
    
    // 创建link标签加载对应CSS
    const linkTag = document.createElement('link');
    linkTag.rel = 'stylesheet';
    linkTag.href = `/${cssFile}`;
    document.head.appendChild(linkTag);
  }
}

这样只会加载当前设备对应的CSS，不会出现合并导致的样式冲突。

3. 解决styles.css自动生成的问题 #

Angular CLI默认会把src/styles.css作为全局样式入口，如果你删掉文件但没从angular.json的styles数组移除它，构建时就会自动生成空文件。要保留自己的styles.css：

• 确保src/styles.css物理存在，里面只放全局通用样式，别加设备专属代码。
• 不要从angular.json的styles数组里移除它，CLI就会用你自己的文件，不会自动生成空文件。

额外提示 #

• 测试前清一下浏览器缓存，避免旧的合并CSS干扰结果。
• 把设备专属的CSS变量、样式分别放在desktop.css和mobile.css里，styles.css只放全局共用的内容。

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