如何无需多级../../即可从嵌套父目录引入CSS文件？

项目目录结构（仅展示必要部分） #

# A needed clarification. The output you see below is not the whole project, 
# it's just a necessary part that needs to be shown.

.
├── 1_introduction
│   └── ...
├── 2_growing_and_shrinking
│   ├── css-tricks_lesson
│   │   └── ...
│   ├── theory.txt
│   └── TOP_lesson
│       ├── flex-basis
│       │   └── index.html
│       ├── flex-grow
│       │   └── index.html
│       └── flex-shrink
│           └── index.html
├── 3_axes
│   └── ...
├── 4_alignment
│   └──...
└── common-styles.css

需要为所有index.html文件引入common-styles.css。当前使用<link rel="stylesheet" href="../../../common-styles.css">的多级../../回退方式，不够优雅。尝试过VSCode提示的项目根目录绝对路径<link rel="stylesheet" href="/foundations/3_flexbox/common-styles.css">，但无法生效。想找无需全本地路径和多级回退的解决方案，该如何实现？是否需要配置编辑器？

下面是几种可行的实现方式：

1. 用本地服务器指定项目根目录 #

直接打开本地HTML文件时，浏览器会把本地文件系统的根（比如C:\或/）作为绝对路径的根，所以你写的根路径会指向错误位置。用本地服务器运行项目就能解决：

• VSCode Live Server插件：安装后右键点击项目根目录的任意文件，选择「Open with Live Server」，此时服务器会把你的项目根目录作为网站根目录，所有index.html都可以用<link rel="stylesheet" href="/common-styles.css">直接引入样式，无需多级回退。
• 命令行服务器工具：比如Node.js的http-server，全局安装后在项目根目录执行http-server命令，同样会把当前目录作为网站根，用根路径引用即可。

2. 用HTML<base>标签统一基准路径 #

在每个index.html的<head>里添加<base>标签，指定基准URL为相对于当前文件的项目根路径，之后所有相对路径都会基于这个基准：
比如在2_growing_and_shrinking/TOP_lesson/flex-basis/index.html中添加：

<base href="../../../">

之后引入样式直接写：

<link rel="stylesheet" href="common-styles.css">

这个方法不需要服务器，直接打开本地文件就能生效，缺点是每个HTML都要加这个标签，但可以用VSCode批量替换或代码片段快速添加。

3. 配置VSCode路径别名（需配合构建工具） #

如果只是想优化编辑器的路径提示，同时让最终代码正常运行，可以配置路径别名，但需要配合构建工具（比如Vite、Webpack）：
在项目根目录创建jsconfig.json文件，内容如下：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["*"]
    }
  }
}

配置后在VSCode里输入@/common-styles.css会自动提示，但直接打开HTML文件无法识别这个别名，必须用构建工具打包后才能生效，适合需要打包的项目。

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