React项目从public/assets导入CSS报错，求保留字体路径的解决方法

问题出在你写的导入路径上——React项目的public目录是静态资源的根目录，引用其中的文件时不需要加上/public前缀，项目运行时会自动以public作为根路径去查找资源。你之前的写法加上/public后，路径解析错误，触发了相对导入超出src/的限制报错。

正确的导入方式 #

直接修改src/index.css中的@import路径，去掉/public前缀：

@import url("/assets/fonts/calibri/styleCalibri.css");

额外注意事项 #

如果你的styleCalibri.css内部还引用了字体文件（比如.ttf、.woff2等），要确保这些字体文件的路径也是基于public根目录的：

• 若字体文件和styleCalibri.css在同一目录下（public/assets/fonts/calibri/），可以用相对路径直接引用：

  @font-face {
    font-family: 'Calibri';
    src: url('./calibri.ttf') format('truetype');
    /* 其他字体属性 */
  }
  

• 也可以用绝对路径基于public根目录引用：

  @font-face {
    font-family: 'Calibri';
    src: url('/assets/fonts/calibri/calibri.ttf') format('truetype');
    /* 其他字体属性 */
  }
  

修改完成后，重启React开发服务器，确保浏览器控制台没有404资源错误，字体就能正常加载了。

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