Using CSS modules

If you feel that inline styles are not a suitable solution for your project and your team, but you still want to keep the styles as close as possible to your components, there is a solution for you, called CSS modules. The CSS modules are CSS files in which all class names and animation names are scoped locally by default. Let’s see how we can use them in our projects; but first, we need to configure webpack.

Webpack 5

Before diving into CSS modules and learning how they work, it is important to understand how they were created and the tools that support them.

In Chapter 3, Cleaning Up Your Code, we looked at how we can write ES6 code and transpile it by using Babel and its presets. As soon as the application grows, you may want to split your code base into modules as well.

You can use Webpack or Browserify to divide the application into small modules that you can import whenever you need them, while still creating a big bundle for the browser...