如何在11ty+Nunjucks项目中为各njk文件配置独立CSS？

以下是具体实现步骤：

• 给页面添加专属CSS的Front Matter配置
  在每个需要独立CSS的njk文件头部（比如about.njk），通过Front Matter定义该页面的CSS文件路径：

  ---
  layout: base
  pageCss: "/css/about.css"
  ---
  

  这个变量会被11ty传递给布局文件，用于后续动态引入样式。

• 修改base.njk布局文件，动态引入页面CSS
  在base.njk的<head>区域，全局core.style.css的引入代码之后，添加一段条件判断代码，自动加载页面专属的CSS：

  <link rel="stylesheet" href="/css/core.style.css">
  {% if pageCss %}
    <link rel="stylesheet" href="{{ pageCss }}">
  {% endif %}
  

  这样全局样式会优先加载，只有当页面定义了pageCss变量时，才会额外引入对应的独立CSS文件，不会影响未配置该变量的页面。

• 确保CSS文件的输出路径正确
  把页面专属的CSS文件（比如about.css）放在项目的源目录对应位置（例如src/css/，如果你的11ty配置以src为源目录），确保11ty编译后能将这些CSS文件输出到站点根目录的css/文件夹下，和你在Front Matter里写的路径对应。如果使用Sass等预处理器，要提前配置好11ty的处理规则，让编译后的CSS文件输出到正确路径。

• 可选优化：简化CSS路径书写
  如果所有页面专属CSS都统一放在/css/目录下，可以简化Front Matter的写法，只写文件名即可：

  ---
  layout: base
  pageCss: "about"
  ---
  

  然后在base.njk里拼接路径和后缀：

  {% if pageCss %}
    <link rel="stylesheet" href="/css/{{ pageCss }}.css">
  {% endif %}
  

  这样能减少重复的路径书写，降低出错概率。

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