当我检查时，为什么css会在红色html的头部显示样式标记

我的组成部分：

import React from "react";
import "./homepage.styles.scss";

const Hompage = () => {
  return (
    <div className="homepage">
     .......

    </div>
  );
};

export default Hompage;

当我检查我的代码时，它在头部显示为

mycss

int

以下是chrome开发工具中显示的内容的图片：

---

这是react/angular应用程序的常规、通用或通用方式。您可以将所有css和js放在一个index.html页面中

我想你无法避免

但是尝试使用延迟加载组件，但是我仍然认为css会被附加到您的页面中

css和js被编译并附加到主html文件中，这样浏览器就不必发出请求并等待它完成

1） 这样，您的页面将快速加载。
2） 将保存服务器请求。
3） 无阻塞css或js。
4） 还有更多

使用webpack实现此目的的好处

---

即使您将要使用的css库都会附加到页面中的样式标记中

它可能是通过web包设置以这种方式注入的。我猜您的类名是错误的，classname=“hompage”应该是classname=“homepage”？你在react文件中导入了一个scss文件，因此在那里显示css是完全正常的。我使用create react app生成了一个新的应用程序，但仍然存在相同的问题，我如何避免这个问题？Ênio Abrantes：样式正在工作，但当我检查它时，它会在标题中的标记之间显示，实际问题是什么？我知道它为什么这样做（它优化了加载速度），但为什么你要试图避免呢？它应该工作得很好。

.homepage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 80px;
}

.directory-menu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}