可以将 React Router 基本名称配置为尊重 CSS 中的资产 URL 吗？

Question

我正在使用来自react-router-dom 的BrowserRouter as 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)。它在开发期间中断（react-scripts start 命令）。

background-image: url(/my-cool-path/one.svg);

我希望能够在我BOTH生产构建和开发期间（使用react-scripts start 命令热重新加载）时使用 CSS URL 路径。

有解决方案的想法吗？这可能吗？

Answer 1

简短回答：不是您希望的方式。

问题是，React 是 Javascript，而您的 CSS 不是由 Javascript 处理的。

如果您正在编译 CSS - 例如从 SCSS - 您可以创建一个文件，即。 env-vars.scss，并让它定义一个变量，如$basePath，将其设置为/my-cool-path/。 （喜欢$basePath: "/my-cool-path/";）

将该文件导入您的主 scss 文件，并让 git（或您使用的任何 repo）忽略该文件。然后您可以在服务器上手动重新创建该文件，将$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，那将是一项更艰巨的任务。