create-react-app 中的 CSS 链接答案

【问题标题】：CSS linking in create-react-appcreate-react-app 中的 CSS 链接
【发布时间】：2017-06-28 15:29:45
【问题描述】：

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，然后在 React 组件的 render 方法中由字符串引用。这种神奇的链接是如何发生的？这是 css-loader npm 包的功能吗？如果是这样，此功能在哪里记录？我已弹出应用程序以检查 Webpack 配置，但无法确定此链接是如何发生的。

【问题讨论】：

标签： javascript css reactjs create-react-app postcss

【解决方案1】：

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

此项目设置使用 Webpack 来处理所有资产。 Webpack 提供了一种自定义方式来“扩展” JavaScript 之外的导入概念。为了表示 JavaScript 文件依赖于 CSS 文件，您需要从 JavaScript 文件中导入 CSS……您应该意识到，这会使您的代码在其他构建工具和环境中的可移植性比 Webpack 低。

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

【讨论】：

【解决方案2】：

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

【讨论】：