为什么CSS会在我检查时在rendred html的头部的样式标签中显示

Question

我的组件：

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

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

    </div>
  );
};

export default Hompage;

样式文件：

.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;
}

当我检查我的代码时，它显示为<style> my css </style> int head

这是chrome devtools中显示的图片：

Answer 1

这是将React / Angular应用捆绑在一起的正常，通用或常见方式。您将所有的CSS和JS放在一个index.html页面中。

我想你无法避免。

但是尝试使用延迟加载组件，但我仍然认为CSS可能会先前附加到您的页面中。

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

1）这样，您的页面将快速加载。2）服务器请求将被保存。3）没有阻塞的CSS或JS4）还有更多..使用webpack可以做到的好处

即使您打算全部使用的css库也被附加到页面的样式标签中