CODEWITHSUNDEEP
javascriptcssreactjswebpackreact-css-modules
Vivek Kogilathota
Vivek Kogilathota

Reputation: 3463

How can I enable CSS Modules in React 16.13.1?

everyone! I'm trying to watch tutorials and read articles on how to enable CSS Modules in React 16.13.1. I understand that to do this, I must run "npm run eject", which I have done. Next, I know that I have to edit the "webpack.config.js" file. However, my webpack.config.js file looks very different than those online. A snippet of my webpack.config.js file is below, so what lines must I add and where to enable CSS Modules? If you need more info, please let me know.

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
  importLoaders: 1,
  sourceMap: isEnvProduction && shouldUseSourceMap,
}),

Upvotes: 0

Views: 476

Answers (2)

Eqzt111
Eqzt111

Reputation: 590

Example you create a css file in the same folder as the js file:

MyComponent.module.css

.Mycomponent {
    padding: 10px; 
    margin: 5px;
}

MyComponent.js

import React from 'react';
import classes from "./MyComponent.module.css";

const MyComponent = () => {
    return (
        <div className={classes.Mycomponent}>
            This div needs some padding and margin
        </div>
    )
}

export default MyComponent

Upvotes: 0

Th&#224;nh Trung Phạm
Th&#224;nh Trung Phạm

Reputation: 149

Name your file styles.module.css works in CRA

Upvotes: 1

Related Questions