CSS Modules aren't being loaded for React App

Question

I am new to React so this might be a simple mistake. I am having trouble seeing any of my CSS styling on my React App. I don't know if I have to enable CSS Modules or anything. However, I've heard that functionality is included with recent create-react-app versions. Any help would be appreciated, thanks!

Code is below:

Burger.js

import React from "react";
import classes from "./Burger.css";
import BurgerIngredient from "./BurgerIngredients/BurgerIngredients";

const burger = (props) => {
    return (
        //type has to be string bc we implemented prop-type checking
        <div className={classes.Burger}>
            <BurgerIngredient type="bread-top"/>
            <BurgerIngredient type="cheese"/>
            <BurgerIngredient type="meat"/>
            <BurgerIngredient type="bread-bottom"/>
        </div>
    );
};

export default burger;

BurgerIngredients.js

import React, {Component} from "react";
import classes from "./BurgerIngredients.css";
import PropTypes from "prop-types"; //to see if props are of valid types

class BurgerIngredient extends Component {
    render() {
        let ingredient = null;

        switch(this.props.type) {
            case("bread-bottom"):
                ingredient = <div className={classes.BreadBottom}></div>;
                break;
            case("bread-top"):
                ingredient = (
                    <div className={classes.BreadTop}>
                        <div className={classes.Seeds1}></div>
                        <div className={classes.Seeds2}></div>
                    </div>
                );
                break;
            case("meat"):
                ingredient = <div className={classes.Meat}></div>;
                break;
            case("cheese"):
                ingredient = <div className={classes.Cheese}></div>;
                break;
            case("bacon"):
                ingredient = <div className={classes.Bacon}></div>;
                break;
            case("salad"):
                ingredient = <div className={classes.Salad}></div>;
                break;
            default:
                ingredient = null;
        }
        return ingredient;
    };
};

//check if prop is of valid string
BurgerIngredient.propTypes = {
    type: PropTypes.string.isRequired
};

export default BurgerIngredient;

BurgerIngredients.css

.BreadBottom {
    height: 13%;
    width: 80%;
    background: linear-gradient(#F08E4A, #e27b36);
    border-radius: 0 0 30px 30px;
    box-shadow: inset -15px 0 #c15711;
    margin: 2% auto;
}

.BreadTop {
    height: 20%;
    width: 80%;
    background: linear-gradient(#bc581e, #e27b36);
    border-radius: 50% 50% 0 0;
    box-shadow: inset -15px 0 #c15711;
    margin: 2% auto;
    position: relative;
}

.Seeds1 {
    width: 10%;
    height: 15%;
    position: absolute;
    background-color: white;
    left: 30%;
    top: 50%;
    border-radius: 40%;
    transform: rotate(-20deg);
    box-shadow: inset -2px -3px #c9c9c9;
}

.Seeds1:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    left: -170%;
    top: -260%;
    border-radius: 40%;
    transform: rotate(60deg);
    box-shadow: inset -1px 2px #c9c9c9;
  }
  
.Seeds1:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    left: 180%;
    top: -50%;
    border-radius: 40%;
    transform: rotate(60deg);
    box-shadow: inset -1px -3px #c9c9c9;
  }

  .Seeds2 {
    width: 10%;
    height: 15%;
    position: absolute;
    background-color: white;
    left: 64%;
    top: 50%;
    border-radius: 40%;
    transform: rotate(10deg);
    box-shadow: inset -3px 0 #c9c9c9;
  }
  
  .Seeds2:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    left: 150%;
    top: -130%;
    border-radius: 40%;
    transform: rotate(90deg);
    box-shadow: inset 1px 3px #c9c9c9;
  }
  

.Meat {
    width: 80%;
    height: 8%;
    background: linear-gradient(#7f3608, #702e05);
    margin: 2% auto;
    border-radius: 15px;
}

.Cheese {
    width: 90%;
    height: 4.5%;
    margin: 2% auto;
    background: linear-gradient(#f4d004, #d6bb22);
    border-radius: 20px;
}

.Salad {
    width: 85%;
    height: 7%;
    margin: 2% auto;
    background: linear-gradient(#228c1d, #91ce50);
    border-radius: 20px;
}

.Bacon {
    width: 80%;
    height: 3%;
    background: linear-gradient(#bf3813, #c45e38);
    margin: 2% auto;
}

This is what my app looks like

I can see the BurgerIngredient components on the page, but can't see their styles. The burger style should be in between the 2 texts

Answer 1

If you intend to create a CSS module then use it in your components for scoping purposes, according to CRA you should define your CSS files with module extension.

When you don't use .module extension for your stylesheet files, you should import them like usual and you can't scope them as well.

So it will be something like this:

import "./BurgerIngredients.css";
... // other parts of your component
render(){
  return <div className="BreadBottom"></div>;
}

But if you want to use the CSS module and scope your styles, your stylesheet file should be BurgerIngredients.module.css instead of BurgerIngredients.css then you can import it without any scoping concern just like you did earlier.

import classes from "./BurgerIngredients.module.css";
... // other parts of your component
render(){
  return <div className={classes.BreadBottom}></div>;
}