Create-React-App：CSS 自定义类名未在构建版本中正确加载

Question

我正在使用 create-react-app 构建个人网站，但在站点的部署版本中如何读取 CSS 时遇到了一些问题。

这是我的项目文件夹树：

我有一个包含以下.Text元素的App.css文件：

.Text {
  background-color: white;
  color: black;
  padding: 20px;
  max-width: 600px;
  margin-bottom: 200px;
  border-radius: 20px;
  opacity: 80%;
  z-index: 1
}

然后，在每个组件中，我有一个import '../App.css'然后使用<div className="Text" id="componentName">来包装页面上的任何文本。

当我在本地运行npm run start ，我可以看到在图形背景上清晰呈现的文本，如下所示：

但是，在运行npm run build并在本地打开构建后，我只看到背景图像而看不到文本。
我可以通过删除App.css中的.Text元素使文本在构建版本上可见，但我想显示这些文本元素的样式。

任何有关如何解决此问题的建议将不胜感激。

Answer 1

仅在 App.js 中导入您的 App.css，您可以使用组件中的类。