How to add CSS modules into your react Application?

“Believe in yourself && Keep Learning”

Step1:- In our example we have take “create-react-app” template as reference. Install this and than perform “yarn eject”

What is yarn eject:- it will give you control of the create-react-app and you can install or play with config settings or package.json file.

Step2:- Search for “css-loader” inside the file “config/webpack.config.dev.js” and enable CSS modules in this.

Before:-

 require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },

After:-

              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: "[name]__[local]___[hash:base64:5]"
                },
              },

Step3:- Change it for production file also(“config/webpack.config.prod.js” )

Before:-

  loader: require.resolve('css-loader'),
                      options: {
                        importLoaders: 1,
                        minimize: true,
                        sourceMap: shouldUseSourceMap,
                      },

After:-

                    {
                      loader: require.resolve('css-loader'),
                      options: {
                        importLoaders: 1,
                        modules: true,
                        minimize: true,
                        sourceMap: shouldUseSourceMap,
                      },
                    },

Step4:-Implementing CSS modules,

use >  import styes from ‘filename’ and than className={styles.class}

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import styles from './ToolTip.css';

export default class ToolTip extends Component {
    static displayName = "ToolTip";

    static propTypes= {
        children: PropTypes.node.isRequired,
    }

    render(){
        const {children} = this.props;
        return(
            <div className={styles.header}>
               {children}
            </div>
        );
    }
}

Step5:- yarn start
Now React app is happily married to CSS modules.

Note:- Incase you are facing issue with using global classes and CSS modules together you can use “ClassNames”

Example code using both css modules and global classes.

import classnames from 'classnames';
import styles from './test.module.scss';
<Button
          className={classnames('button', 'button-primary', styles.login)}
          type="submit"
        >
Test Button
</Button>