- React Cookbook
- Carlos Santana Roldan
- 206字
- 2021-07-16 17:49:36
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).