Reactjs-在组件中导入CSS / JS

Question

我正在尝试在Reactjs上使用HTML主题创建网页。 我研究发现，有4种方法可以在此链接中导入CSS。 所有这些方式在关闭HEAD标签之前都以相同的方式输出，即<style>MY_CSS</style> 。

这对于单个CSS来说是可以的，但是当我们使用多个CSS时，可能会与其他CSS发生冲突。

所以我的问题是我们是否可以导入CSS，以使其不会显示为<style></style> 。 由于<style>标签可以用作内联CSS，因此我不想内联使用它。

第二个问题：如何导入Js？ 当我使用requirejs加载多个js时，为此，我尝试在其中调用其他js的地方导入require.config.js 。

请看看我得到什么

需要在下面这样

请帮助，在此先感谢！

Answer 1

学习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的节点，称为root并在其中插入包含Hello, world!的h1节点Hello, world! 。 然后，您可以将自己选择的样式应用于新创建的节点。

这个例子是从这里拿来的

虽然以这种方式使用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项目的工作方式。

Answer 2

这只是通过普通ES完成的。 例如：

import React, { Component } from 'react'
import './SomeFileWithStyle.css'

第二行导入一个CSS文件，其中包含CSS代码。 现在，您可以使用其中指定的类。 如果您需要更多帮助，请遵循本指南： 样式和CSS-React 。

在此处阅读有关ES导入语句的更多信息： import-JavaScript | MDN

Answer 3

从正确的路径导入.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">

Answer 4

使用wepback创建捆绑软件时，需要使用css-loader。

安装它：

npm install css-loader --save-dev

在这里阅读更多