首页 文章

在create-react-app中链接CSS

提问于
浏览 次
6

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 方法中由字符串引用 . 这种神奇的联系是如何发生的？这是css-loader npm包的功能吗？如果是，那么这个功能记录在哪里？我已经弹出应用程序来检查Webpack配置，但是我无法理解这种链接是如何发生的 .

javascript css reactjs create-react-app postcss

2 回答

  • 0

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

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

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

    回复于
  • 4

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

    回复于

相关问题