React项目中public下独立HTML能否引用src目录的CSS文件？

不能直接在public/docs/index.html里引入src/css/styles.css，不管是开发还是构建环境都走不通，原因如下：

开发环境限制 #

React开发服务器（比如Create React App默认的Webpack Dev Server）只会处理src目录内的资源，且不会把src目录暴露为可直接访问的静态资源路径。从public下的HTML文件去引用src里的CSS，服务器会返回404，找不到对应文件。

构建环境限制 #

执行npm run build后，Webpack会对src里的CSS进行打包处理：要么将样式嵌入到JS bundle中，要么生成带哈希值的独立CSS文件（比如main.xxxx.css），并输出到build/static/css目录。而原src/css/styles.css不会被直接复制到build目录里，所以构建后的docs/index.html同样找不到原文件。

可行解决方案 #

方案1：同步共用样式到公共目录 #

把src/css/styles.css作为源文件，通过脚本自动同步到public/css目录：

• 开发阶段：添加监听脚本，当src/css/styles.css变化时自动复制到public/css。比如在package.json的scripts里加：

  "scripts": {
    "start": "npm run sync-css & react-scripts start",
    "sync-css": "copyfiles -w src/css/styles.css public/css/"
  }
  

  （需先安装copyfiles：npm install copyfiles --save-dev）
• 构建阶段：在build前先复制样式到build/css，比如：

  "scripts": {
    "build": "copyfiles src/css/styles.css build/css/ && react-scripts build"
  }
  

  然后在public/docs/index.html里引用相对路径的CSS：

  <link rel="stylesheet" href="../css/styles.css">
  

  React项目里依然保持import './css/styles.css'的引入方式。

方案2：配置Webpack提取共用样式 #

如果是自定义Webpack配置（或使用craco/react-app-rewired修改Create React App的配置），可以让Webpack把共用CSS单独提取到指定路径，同时兼容开发和构建：

• 配置mini-css-extract-plugin，将src/css/styles.css单独打包成static/css/shared-styles.css
• 开发环境下，Dev Server会将这个打包后的CSS暴露在http://localhost:3000/static/css/shared-styles.css，docs/index.html直接引用这个URL
• 构建后，这个CSS文件会出现在build/static/css目录，docs/index.html引用相对路径：../../static/css/shared-styles.css

这种方式无需手动同步文件，但需要修改Webpack配置，适合有定制化需求的项目。

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