是否可以在生产构建（webpack / craco）上更改样式表 URI？答案

【问题标题】：Is it possible to change stylesheet URI on production build (webpack / craco)?是否可以在生产构建（webpack / craco）上更改样式表 URI？
【发布时间】：2020-10-02 18:02:40
【问题描述】：

在为生产构建构建反应应用程序时，我想将特定样式表链接从“http://127.0.0.1:4000/custom/styles.css”更改为“/custom/styles.css”

是否可以使用 webpack / craco 做到这一点？如果有可能我怎么能做到这一点？ :)

【问题讨论】：

你在哪里有这样的链接？
在 index.html 文件中
为什么不用相对链接导入呢？ import './custom/style.css? create-react-app.dev/docs/adding-a-stylesheet
这很复杂，但是像这样的图像 -> 当 react.js 在开发服务器上运行时，它将在端口：3000 上工作，当我尝试通过 /custom/styles 访问它时.css 它将指向 127.0.0.1:3000/custom/styles.css 但是当我创建生产版本时，它将指向 127.0.0.1:4000/custom/styles.css 并且它只能在生产环境中工作。我需要让它在生产环境和开发环境中都能工作。 React 构建从后端作为静态文件提供...

标签： reactjs webpack build production craco

【解决方案1】：

如果你使用 Create React App，你可以使用dotenv variables。

在根目录创建文件.env和.env.development，属性应该是这样的：

REACT_APP_STYLESHEET_URI=somevalue

其中somevalue 可以具有任何值，并且在开发/生产中有所不同。

您可以通过以下方式在代码中访问它们：

const uri = process.env.REACT_APP_STYLESHEET_URI

或者在index.html：

<link rel="stylesheet" href="%REACT_APP_STYLESHEET_URI%">

【讨论】：

我知道环境变量，但问题是样式表 URI 值是 index.html，我不能只在 html 文档中硬编码环境变量。我需要利用 craco / webpack 来替换 URI 值...
create-react-app.dev/docs/adding-custom-environment-variables/…
更新答案以添加此详细信息@LuckyLuke
它确实有效，环境变量的东西。构建生产构建时，URI 是正确的，但尝试在开发服务器中启动时，环境变量未插入 URI。因此我创建了 .env.development 文件..
您需要重新启动正在运行的开发服务器，.env 中的更改只会在服务器启动时获取