Skip to main content

5.10.0 Working With CSS Modules

Another way to scoping styles to your components.

So of writing styles which only apply to a specific component instead of the entire application because that is an important thing.

First, we need to tweak the configuration if we're using react scripts.

If react-script version = 1​

For this course you need an earlier version of react-scripts:

npm uninstall react-scripts --save && npm install react-scripts@1.0.13 --save

Disassembling React Tooling​

We need to tweak the configuration of our project a little bit.

npm run eject

What this will do is it will eject from this under the hood configuration where you don't really have access to the underlying web packed conflict file and so on and give you access to the conflict files so that you can tweak how your code is bundled together and so on and there is something we will need to tweak there.

Configure webpack.config files​

After successfully ejected, add two lines in these two files:

config/webpack.config.dev.js
        ...
156      {
157         test: /\.css$/,
158         use: [
159           require.resolve("style-loader"),
160           {
161             loader: require.resolve("css-loader"),
162             options: {
163               importLoaders: 1,
                  modules: true,
                  localIdentName: "[name]__[local]__[hash:base64:5]",
164             },
165           },
166           {
        ...
config/webpack.config.prod.js
            ...
169               use: [
170                 {
171                   loader: require.resolve("css-loader"),
172                   options: {
173                     importLoaders: 1,
174                     minimize: true,
175                     sourceMap: shouldUseSourceMap,
                        modules: true,
                        localIdentName: "[name]__[local]__[hash:base64:5]",
176                   },
177                 },
178                 {
            ...

This feature gives unique names to CSS class names. In this manner:

<button class="App__Button__2_NDl">Toggle Persons</button>

If react-script version > 1​

You need to add to filename of the CSS file the word module. For example, Person.css will be Person.module.css :

import classes from './Person.module.css'

This will automatically work without ejecting.