CSS Modules

What are CSS Modules?

CSS files in which all class names and animation names are scoped locally by default.

Why use CSS Modules?

With CSS Modules, it’s a guarantee that all the styles for a single component:

• Live in one place
• Only apply to that component and nothing else

This entire approach is designed to fix the global scope issue in CSS.

Here is a good link to getting started with CSS Modules: LINK

We first need to install webpack

yarn add webpack

Next, if you don't have an index.js, make one in /src

Outside /src, we need to create a webpack.config.js

Inside webpack.config, add the following:

module.exports = { entry: './src', output: { path: 'build', filename: 'bundle.js', }, };