CODEWITHSUNDEEP
reactjs
user1086010
user1086010

Reputation: 697

How do I fix create-react-app not loading CSS Modules?

I created a new react app by Create-React-App and I tried to use CSS Modules, but it's doesn't seem to work anymore. here is my simple usage of CSS modules : 

import styles from './myStyle.css';

function App() {
  return (
    <div className={styles.container}>
    </div>
  );
}

It's work on my older project, the only differences in my older project with the new one is the react-scripts version.

my new project dependencies :

 "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.0"
  }

my old project dependencies :

 "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8"
  },

Has anything changed in react-scripts v3 ?

Upvotes: 5

Views: 8169

Answers (1)

SkyAo
SkyAo

Reputation: 687

To use CSS module, you should name your file to [name].module.css:

This project supports CSS Modules alongside regular stylesheets using the [name].module.css file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format [filename]\_[classname]\_\_[hash].

https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

Upvotes: 9

Related Questions