CSS in React isn't styling

Question

My CSS doesn't work with my React project, it only changes body (I changed the background color from white to black), the rest from .info isn't working at all. What am I doing wrong?

import React from 'react';
import styled from 'styled-components';
import styles from 'assets/css/CSS.module.css';

const Offer = () => (
    <div>
      <div className={'info'}>
        <h1 className={'info__title'}>Pick a pricing plan</h1>
        <p className={'info__description'}>
            We did our best to meet your expectations. 
            Please feel free to pick the right plan for your needs. 
            Remember that in any moment you can switch your pricing plan.
        </p>  
      </div>
      <div className={'container'}>
        <div className={'box'}>
          <h2 className={'box__title'}>Basic</h2>
          <p className={"box__description"}>
             Everything you need. For a reasonable price.
          </p>
          <p className={"box__price"}>$29</p>
          <button className={"box__button"}>choose</button>
        </div>
        <div className={"box box--featured"}> 
          <h2 className={"box__title"}>Pro</h2>
          <p className={"box__description"}>
             More than anyone can give – for less than anywhere else.
          </p>
          <p className={"box__price"}>$99</p>
          <button className={"box__button"}>choose</button>
        </div>
        <div className={"box"}>
          <h2 className={"box__title"}>VIP</h2>
          <p className={"box__description"}>
             Ok, we get it. You’re the boss now. Just tell us what you need.
          </p>
          <p className={"box__price"}>$429</p>
          <button className={"box__button"}>choose</button>
        </div>
      </div>
    </div>
);

const HomePage = () => (
  <>
    <div>
    <Offer/>
    </div>

  </>
);

export default HomePage;

$dark: #171717;
$light: #ffffff;
$font-stack: 'Fira Code', sans-serif;

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: $font-stack;
  background-color: $dark;
  color: $light;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 50px 0 0;
}

.info {
  text-align: center;
  max-width: 700px;
  margin-bottom: 60px;

  &__title {
    font-size: 45px;
  }

  &__description {
    font-size: 18px;
  }
}

.container {
  display: grid;
  max-width: 1000px;
  align-items: center;

  @media (min-width: 800px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.box {
  min-height: 500px;
  border: 5px solid $light;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 15%;
  position: relative;

  &:first-of-type {
    right: -5px;
  }

  &:last-of-type {
    left: -5px;
  }

  &__title,
  &__price {
    font-size: 45px;
    font-weight: bold;
  }

  &__title {
    margin: 0 0 20px;
  }

  &__price {
    margin: 30px 0;
  }

  &__description {
    font-size: 14px;
  }

  &__button {
    background-color: $light;
    padding: 8px 25px;
    font-family: $font-stack;
    font-weight: bold;
    border: none;
  }

  &--featured {
    background-color: $light;
    color: $dark;
    min-height: 550px;
    box-shadow: 
      -20px 0 25px -15px rgba(255,255,255, .3),
      20px 0 25px -15px rgba(255,255,255, .3);

    &::before {
      width: 95%;
      height: 97%;
      content: '';
      position: absolute;
      border: 5px solid $dark;
    }

    &::after {
      top: 1.5%;
      width: 40%;
      min-width: 45px;
      height: 30px;
      content: 'most popular';
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: $light;
      background-color: $dark;
      position: absolute;
    }

    .box__title,
    .box__price {
      font-size: 60px;
    }

    .box__description {
      font-size: 16px;
    }

    .box__button {
      position: relative;
      z-index: 10;
      background-color: $dark;
      color: $light;
      font-size: 20px;
      padding: 12px 28px;
    }
  }
}

I added the correct code, before that i started writing something else, but that doesnt matter now. details, details, details , details - just wrote this so i could edit.

I've changed css. to scss, imported scss. and installed sass, but the only thing that change is the body background to black

Answer 1

Use a relative path. Assuming HomePage.js is in components, the import should be import '../assets/css/CSS.module.css'

Answer 2

There are several problems in your original post.

1) jsx className syntax

Your JSX should look like this:

const Offer = () => (
  <div className={'info'}>text</div>
  ...

See codeburst.io/styling-in-react.

2) Specify the correct import

Your path / filename for the stylesheet should be something like:

import '../../assets/css/CSS.module.css';

3) Add Sass to your project

Node-sass is a library that provides binding for Node. js to LibSass, the C version of the popular stylesheet preprocessor, Sass. It allows you to natively compile . scss files to css

Here you can read more about node-sass.

Once you fixed your path, you need to make sure that sass is correctly interpreted. To make your css (sass syntax) work you need to do two things as css is not scss:

1) Rename your .css file to .scss (yarn will show an error then)
2) Run npm install node-sass (to install sass) npm install node-sass and add it to your project by adding --save to the command.