以下是根据我们之前的讨论整理的Markdown文档，它详细描述了如何配置Angular项目以支持子路径部署，并确保CSS文件和其中引用的资源（如图片）能够正确加载。

```markdown
# Angular 子路径部署与 CSS 资源路径处理

## 概述

本文档指导如何在Angular项目中设置`--base-href`参数来适应子路径部署，并确保所有静态资源（包括CSS文件内引用的图片等资源）都能正确加载。我们将通过具体的示例展示如何实现这一目标。

## 目录结构

```
dist/nova-stv/browser/
├── assets/
│   ├── img/
│   │   └── background.png
│   └── style/
│       └── variables.css
├── index.html
├── main.js
└── ...
```

## 步骤指南

### 1. 设置 baseHref 参数构建项目

使用以下命令构建你的Angular项目：

```bash
ng build --configuration=production --output-path=dist/nova-stv/browser --base-href=/dev/stv/
```

这将确保所有内部资源引用都会自动加上前缀 `/dev/stv/`。

### 2. 修改 angular.json 配置

确保在`angular.json`中为生产环境配置正确的`styles`数组：

```json
"production": {
  "styles": [
    {
      "input": "projects/nova-stv/src/assets/style/variables.prod.css",
      "inject": true,
      "bundleName": "variables"
    },
    ...
  ]
}
```

对于开发环境，你可以使用不同的CSS文件或相同的相对路径。

### 3. 动态加载 CSS 文件

在`main.ts`中动态加载CSS文件时，请确保添加正确的`baseHref`：

```typescript
import {environment} from './environments/environment';
import {bootstrapApplication} from '@angular/platform-browser';
import {appConfig} from './app/app.config';
import {AppComponent} from './app/app.component';

// 获取 baseHref（即 /dev/stv/）
const baseHref = (window as any).__app_base_href__ || '/dev/stv/';
const cssFileName = environment.production ? 'variables.production.css' : 'variables.css';
const head = document.head;
const linkElement = document.createElement('link');
linkElement.rel = 'stylesheet';
linkElement.href = `${baseHref}assets/style/${cssFileName}`;

head.appendChild(linkElement);

// 等待样式加载完成后再启动应用（可选，但推荐）
linkElement.onload = () => {
  bootstrapApplication(AppComponent, appConfig)
    .catch((err) => console.error(err));
};

linkElement.onerror = () => {
  console.error(`Failed to load CSS file: ${cssFileName}`);
  bootstrapApplication(AppComponent, appConfig)
    .catch((err) => console.error(err));
};
```

### 4. 处理 CSS 中的资源引用

为了保证CSS中的资源引用也包含正确的`baseHref`，你需要调整CSS变量定义。例如，在`variables.css`中：

#### 使用相对路径（推荐）

```css
:root {
  --asset-path: "assets";
  --background-url: url("assets/img/background.png");
}
```

这样可以确保资源请求会基于当前页面的路径进行解析，从而避免绝对路径导致的问题。

### 5. HTML 文件中的资源引用

确保所有的HTML文件中的资源引用也是相对路径，例如：

```html
<img src="assets/img/logo.png">
<link rel="stylesheet" href="assets/style/variables.css">
```

environment.ts

```
// src/environments/environment.prod.ts

export const environment = {
  production: true,
  // 其他生产环境配置
};

```