在create-react-app中链接CSS

Question

create-react-app以一个看起来像这样的App.js启动你：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

注意import './App.css' - 此CSS文件的匿名导入。 App.css具有App类和App-header等CSS类，然后在React组件的render方法中由string引用。 这种神奇的联系是如何发生的？ 这是css-loader npm包的功能吗？ 如果是，那么这个功能记录在哪里？ 我已经弹出应用程序来检查Webpack配置，但是我无法理解这种链接是如何发生的。

Answer 1

根据create-react-app README ，css导入由Webpack插件处理。

此项目设置使用Webpack处理所有资产。 Webpack提供了一种“扩展”JavaScript导入概念的自定义方式。 要表明JavaScript文件依赖于CSS文件，您需要从JavaScript文件中导入CSS ...您应该知道这使得您的代码比Webpack更不容易移植到其他构建工具和环境。

使用create-react-app创建的项目的构建系统位于另一个名为react-scripts包中。 这个项目的package.json 包含了对css-loader 的依赖 ，它似乎是用于允许css导入的插件。

Answer 2

如果你正在使用create-react-app，那么据我所知，所有的魔法都应该发生在你安装并在你开始运行时运行的react-scripts模块中。