我正在使用BrowserRouter as Router中的react-router-dom。我想将应用程序托管在非/的路径上。我在router标记上使用了basename属性，效果很好。
<Router basename={'/my-cool-path'}>
我指的是我的反应组件中的图像，如下所示：
<img class="number" src="one.svg"/>
HTML参考非常有用。但是在我的CSS文件中，这会中断：
background-image: url(one.svg);
我尝试过此操作，但在prod构建（开发环境工作正常）时会中断：
background-image: url(/one.svg);
这有效，但仅适用于生产版本（react-scripts build）。在dev（react-scripts start命令）期间中断。
background-image: url(/my-cool-path/one.svg);
我希望能够同时同时进行生产构建和在开发期间（使用react-scripts start命令进行热加载）使用CSS URL路径。
有解决方案的想法吗？这可能吗？
答案 0 :(得分：0)
简短的回答：不是您希望的方式。
问题是，React是Javascript，而您的CSS不是由Javascript处理的。
如果要编译CSS（例如从SCSS），则可以保存您的文件，即可以创建一个文件。 env-vars.scss，并让其定义变量$basePath，将其设置为/my-cool-path/。 （例如$basePath: "/my-cool-path/";）
将该文件导入到您的主scss文件中，并让git（或您使用的任何回购协议）忽略该文件。然后，您可以在服务器上手动重新创建该文件，将$basePath设置为/（$basePath: "/";）。
然后您可以在scss的URL中使用$ basePath，例如background-image: url($basePath + "img/some-background.png");
编译scss时，它将从该文件中提取var，如果您的repo忽略它，则可以根据运行编译的环境来创建不同的值。
但是使用react-scripts start和react-scripts build进行构建也可能为您提供一种方法来设置ENV变量并将其导入到您的scss中，但是我对此并不完全熟悉，因此我不得不恐怕会引导您前往Google。
如果您不是从预处理器编译CSS，这将是一项艰巨的任务。