在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具有CSS类等App和App-header,然后由字符串中的引用render的阵营组分的方法.这种神奇的联系是如何发生的？这是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导入的插件。