我正在尝试使用Reactjs 上的 HTML 主题创建网页。我研究并发现在this link 有 4 种方法可以导入 CSS。所有这些方式都以相同的方式输出，即 <style>MY_CSS</style> 在关闭 HEAD 标记之前。
这对于单个 CSS 是可以的，但是当我们使用多个 CSS 时，它可能会与其他 CSS 冲突。
所以我的问题是我们是否可以导入 CSS，使其不显示为 <style></style>。由于<style> 标签作为内联 CSS 工作，我不想内联使用它。
第二个问题：如何导入Js？
由于我使用requirejs 加载多个js，为此我尝试导入require.config.js 调用我的其他js。
请帮忙，提前谢谢！
【问题讨论】：
标签： javascript html css reactjs requirejs
学习React 以及构建React 项目（包括从css 到多个js 文件等的所有内容）的最简单方法是使用create-react-app
让我试着详细说明一下。
React 是一个 JavaScript 库。例如，您可以从cdn 获取库并将其包含在您的index.html 文件中，就像获取jquery 一样。而且，通过包含该库，您可以执行以下操作：
const element = React.createElement(
'h1',
null,
'Hello, world!'
);
const container = document.getElementById('root');
ReactDOM.render(element, container);
由于您拥有来自cdn 的库，因此您可以访问它的方法，例如createElement，该库将在dom 中查找一个名为id 的节点root 并插入其中一个包含Hello, world! 的h1 节点。然后，您可以将您选择的样式应用于新创建的节点。
这个例子取自here
虽然当然可以通过这种方式使用React，但我认为你不应该这样做。
您应该按照create-react-app 链接中列出的步骤，使用create-react-app 引导项目。这将为您提供一个预配置的项目，让您能够以现代方式使用该库。
create-react-app 为您提供的项目设置为使用名为 webpack 的工具和名为 babel 的工具。 Webpack 是 module bundler。使用一组规则，它将获取多个文件并将它们捆绑在一起。它如何以及为什么起作用超出了这个问题的范围。 Babel 是一个 javascript 编译器或语法转换器。同样使用一组规则，它把ES6 变成了普通的javascript。同样，方式和方式超出了范围。你应该知道的是，因为有webpack 和babel，你才能写出这样的代码。
import styles from 'style.module.css'
您无需付出任何努力即可完成此操作，因为所有内容都已由 create-react-app 配置。
这就是为什么我建议你从这个开始。只需安装它，启动一个项目并快速查看App.js 是如何设置的。您将在那里看到 css 导入、component 导入，并且会给您一个关于现代 React 项目如何工作的简要概述。
【讨论】：
这只是通过普通的 ES 完成的。例如：
import React, { Component } from 'react'
import './SomeFileWithStyle.css'
第二行导入一个包含 CSS 代码的 CSS 文件。您现在可以使用其中指定的类。如果您需要进一步的帮助，请遵循本指南：Styling and CSS - React。
在此处阅读有关 ES 导入声明的更多信息：import - JavaScript | MDN
【讨论】：
【讨论】：
从正确的路径导入您的 .css 文件。我在 index.html 中使用<link rel="stylesheet" href="css/style.css">
时遇到了困难，没有任何运气。
但相反：
index.html：
<link rel="stylesheet" href="/src/css/style.css"/>
style.css：
div.custom-div {
background-color: red;
}
现在，你可以使用
<div className="custom-div">
【讨论】：