Question

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

单个CSS可以，但是当我们使用多个CSS时，它可能与其他CSS冲突。

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

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

请看看我得到了什么

下面需要这样的

请提前帮助，谢谢！

Answer 1

学习function headerEffect() { var win = $(window).scrollTop(); var blackspace = $('.black').offset().top; var headw = $('.logo-white'); var headb = $('.logo-black'); var where = window.pageYOffset || document.documentElement.scrollTop; $('.black').each(function() { if (win >= ($(this).offset().top - 10) && win <= ($(this).offset().top + $(this).height())) { console.log('123'); headw.css({ 'transform': 'translateY('+( win - blackspace - 42) + 'px' +')' }); } }) }的最简单方法以及构建React项目的方式（包括所有内容，从React到多个css文件等）是使用create-react-app

让我试着详细说明一下。

js是一个javascript库。例如，您可以从React获取库，并将其包含在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的{{1}}节点。然后，您可以向新创建的节点应用您选择的样式。

此示例取自here

虽然以这种方式肯定可以使用h1，但在我看来，你不应该这样做。

您应该遵循Hello, world!链接中列出的步骤，并使用React引导项目。这将为您提供一个预先配置的项目，允许您以现代方式使用库。

create-react-app为您提供的项目设置为使用名为webpack的工具和名为babel的工具。 create-react-app是create-react-app。使用一组规则，它将需要几个文件并将它们捆绑在一起。它的工作原理和原因超出了本问题的范围。 Webpack是一个javascript编译器或语法转换器。同样使用一组规则，它将ES6转换为常规javascript。同样，方式和方式超出了范围。您应该知道的是，由于module bundler和Babel，您将能够编写这样的代码。

webpack

您可以毫不费力地完成此操作，因为所有内容都已由babel配置。

这就是为什么我建议你从这开始。只需安装它，引导项目并快速查看import styles from 'style.module.css'的设置方式。您会看到有create-react-app次导入，App.js导入，并且会为您提供一个很好的概述，即现代css项目如何运作。

Answer 2

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

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

第二行导入一个包含CSS代码的CSS文件。您现在可以使用那里指定的类。如果您需要进一步的帮助，请按照本指南进行操作：Styling and 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创建bundle时需要使用css-loader。

安装它：

npm install css-loader --save-dev

了解更多here

Reactjs - 在组件中导入CSS / JS

4 个答案: