为什么 React 渲染页面被忽略 CSS 文件答案

【问题标题】：Why React Rendered Pages are Ignored CSS Files为什么 React 渲染页面被忽略 CSS 文件
【发布时间】：2018-07-01 09:45:58
【问题描述】：

我有一个使用 create-react-app 创建的 React 应用程序，它链接到我的 CSS 文件，如下所示的 index.html 文件：

<link rel="stylesheet" href="../src/site.css"></link>

site.css 实现如下：

body {
  background-color: green;
  height:100%;
  width:100%; 
}

当我的应用程序运行时，它不会将样式应用于正文。我可以看到正在下载 css 文件。

【问题讨论】：

您是否尝试过将您的 css 导入到您的组件类中？ import './site.css';
我必须这样做吗？我不能把它链接到 HTML 文件中。
您的 index.html 和 site.css 文件放在哪里？ index.html 中的 css 路径可能不正确。检查路径 href=“../src/site.css” 我猜这似乎造成了一个问题
你还有body标签吗？你发布了字面上的零代码。
您不必这样做，但通常这不是使用 react 设置应用程序样式的最佳方式

标签： css reactjs

【解决方案1】：

src 目录不与 create-react-app 一起提供。您要么需要将 CSS 文件移动到 public 目录，要么从您的 JavaScript 文件之一导入它。

在内部，所有内容都使用 Webpack 与能够理解样式表的加载器捆绑在一起，因此处理此问题的最简单方法是从您的 public/index.html 文件中删除链接标签，而是将以下导入添加到您的 src/index.js 文件中：

import "./site.css";

或者，如果您确实需要从您的 html 文件链接到样式表，您可以将其移动到 public/site.css 并更改您的链接标签以引用它：

<link rel="stylesheet" href="/site.css">

【讨论】：