部署Heroku后CSS :root代码在HTML中显示为纯文本的问题求助

核心原因分析 #

你遇到的问题大概率是两个因素共同导致的：

1. 全局CSS选择器强制设置所有元素为display:block，导致内联<style>标签（包含:root代码）被当作可见元素渲染，内部CSS代码直接显示为纯文本。
2. HTML中CSS文件的相对路径在Heroku环境下解析错误，导致样式未正确加载或优先级异常。

具体修复步骤 #

1. 修正全局CSS选择器 #

你的base.css中* {display:block;}会匹配所有HTML元素，包括<style>、<meta>、<link>等原本不可见的元素，这会直接导致内联样式代码暴露在页面上。修改为仅针对需要的元素设置样式：

/* 替换原有的*选择器 */
*:not(style):not(script):not(meta):not(title):not(link):not(noscript) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Kumbh Sans", sans-serif;
  display: block;
}

/* 移除不必要的head样式，head默认就是display:none */
/* head {
  display: none;
} */

更合理的做法是避免给所有元素强制设置display:block，仅针对需要块级显示的元素单独设置，防止破坏浏览器默认布局（比如<a>、<span>等行内元素会被强制转为块级，影响排版）。

2. 修正CSS文件路径 #

当PHP文件在根目录并include子目录的home.html时，HTML中的相对路径是相对于当前页面的URL（即根目录），而非home.html所在的子目录。将相对路径改为根绝对路径：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Project H.E.L.L.O.</title>
  <!-- 使用根绝对路径 -->
  <link rel="stylesheet" href="/css/base.css" type="text/css" />
  <link rel="stylesheet" href="/css/home.css" type="text/css" />
</head>

确保css文件夹直接位于项目根目录下，这样无论页面URL是什么，都能正确加载CSS文件。

3. 优化PHP文件加载方式 #

include_once()会尝试解析HTML文件中的PHP代码，对于纯静态HTML文件，使用readfile()更稳妥，避免不必要的解析：

<?php readfile("html/home.html"); ?>

4. 完善Heroku配置 #

空的composer.json可能导致Heroku的PHP环境配置异常，添加基础配置确保服务器正确运行：

{
  "require": {
    "php": "^7.4 || ^8.0"
  },
  "scripts": {
    "start": "php -S 0.0.0.0:$PORT"
  }
}

提交更新后的composer.json到Heroku，重新部署应用。

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