React Router basename 可以配置为尊重 CSS 中的资产 URL 吗？

Question

我正在使用 react-router-dom 中的 BrowserRouter as Router。我想在不是 / 的路径上托管我的应用程序。我在路由器标签上使用了 basename 属性，效果很好。

<Router basename={'/my-cool-path'}>

我指的是我的 React 组件中的图像，如下所示：

<img class="number" src="one.svg"/>

HTML 参考非常有用。但是在我的 CSS 文件中，这会中断：

background-image: url(one.svg);

我试过了，但它会破坏产品构建（开发环境有效）：

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

这有效，但仅适用于生产版本 (react-scripts build)。它在开发期间中断（react-scripts start 命令）。

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

我希望能够有 CSS URL 路径，当我做 BOTH 生产构建和开发期间（热重载 react-scripts start命令）。

有什么解决方案吗？这可能吗？

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 的网址中使用 $basePath，例如 background-image: url($basePath + "img/some-background.png");

每当编译 scss 时，它都会从该文件中提取 var，如果您的回购忽略它，您可以根据运行编译所在的环境创建不同的值.

然而，使用 react-scripts start 和 react-scripts build 构建也可能为您提供一种设置 ENV 变量并将其导入到您的 scss 的方法，但我对此并不完全熟悉，所以我会恐怕必须将您引导至 google 才能找到那个。

如果您不从预处理器编译 CSS，这将是一项更艰巨的任务。

Can React Router basename be configured to respect asset URLs in CSS?