上QQ阅读APP看书，第一时间看更新

There's more...

You're probably curious about how the CSS code is added to the browser since we haven't imported a CSS file to our project directly (by using a <link> tag, for example). Well, you will be surprised to see that the CSS code is being injected into our <head> tag using the <style> tag for each imported stylesheet. If you inspect your project with Chrome DevTools you will see something like this:

This behavior is because the style-loader is a Webpack loader that is being used by default in our application when we create it with create-react-app:

There is no way to modify the Webpack configuration directly when we use create-react-app because it is using a package called react-scripts, but in Chapter 10, Mastering Webpack, we will see how to configure our Webpack without using a starting kit such as create-react-app.

There are more Webpack loaders that do different things, such as css-loader for CSS modules, sass-loader to implement Sass, stylus-loader to implement Stylus, and extract-text-plugin to move the CSS code to a .css file instead of injecting it to the DOM (usually, this is only used in production).

本周热推：

5G智联万物：轻松读懂5G应用与智能未来网络安全技术：网络空间健康发展的保障链接与分享：中国互联网站分类研究物联网长距离无线通信技术应用与开发物联网全栈开发原理与实战