Cfrgtkky

React now supports CSS modules in CRA without ejecting. But I am still unable to use them.

"dependencies": {

    "react": "^16.6.3",

    "react-dom": "^16.6.3",

    "react-scripts": "2.1.1"

  },

My react-scripts version is also > 2.0

import React from "react";



import classes from "./Layout.module.css";



const Layout = props => {

  return (

    <React.Fragment>

      <div>Toolbar, SideDrawer, Backdrop</div>

      <main className={classes.Content}>{props.children}</main>

    </React.Fragment>

  );

};



export default Layout;

Layout.css

.Content {

  margin: 10rem;

}

I am using them as mentioned here

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

This is the error I am getting:

./src/components/Layout/Layout.js

Module not found: Can't resolve './Layout.module.css' in '/home/tft/Desktop/My_Workspace/Reactjs-Projects/Personal Projects/burger-king/src/components/Layout'

In your question you state that the css file is named Layout.css, but I think it should be Layout.module.css to work. Or you just forgot to name it properly in here?