title: CSS linking in create-react-app
body: <p>create-react-app starts you with an App.js that looks like this:</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h2&gt;Welcome to React&lt;/h2&gt;
          &lt;/div&gt;
          &lt;p className="App-intro"&gt;
            To get started, edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
          &lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Note <code>import './App.css'</code> - an anonymous import of this CSS file. App.css has CSS classes like <code>App</code> and <code>App-header</code> that are then referenced by string in the <code>render</code> method of the React component. How does this magic linking happen? Is this a function of the css-loader npm package? If so, where is this functionality documented? I have ejected the app to examine the Webpack configuration, but have not been able to put my finger on how this linking is happening.</p>