CSS в React - это не стиль

Question

Мой CSS не работает с моим проектом React, он только меняет тело (я изменил цвет фона с белого на черный), остальное из .info вообще не работает. Что я делаю не так?

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;
    }
  }
}

Я добавил правильный код, до этого я начал писать что-то еще, но сейчас это не имеет значения. подробности, подробности, подробности, подробности - просто написал это, чтобы я мог редактировать.

Я изменился css. с css, импортированные с css. и установлен sass, но единственное, что меняет, это фон тела на черный

Answer 1

Используйте относительный путь. Предполагая, что HomePage. js находится в компонентах, импорт должен быть import '../assets/css/CSS.module.css'

Answer 2

В исходном сообщении есть несколько проблем.

1) jsx className синтаксис

Ваш JSX должен выглядеть следующим образом:

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

См. codeburst.io / styling-in -react .

2) Укажите правильный импорт

Ваш путь / имя файла для таблицы стилей должен быть примерно таким:

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

3) Добавьте Sass в свой проект

Node-sass - это библиотека, которая обеспечивает привязку для Node. js в LibSass, C версия популярного препроцессора таблиц стилей Sass. Это позволяет вам изначально компилировать. s css файлы в css

Здесь вы можете прочитать больше о node-sass .

После того, как вы исправили свой путь, вам нужно сделать уверен, что sass правильно истолкован. Чтобы ваш css (синтаксис sass) работал, вам нужно сделать две вещи, так как css это не s css:

1) Переименуйте ваш. css файл в .s css ( yarn покажет ошибку)
2) Запустите npm, установите node-sass (для установки sass) npm install node-sass и добавьте его в свой проект, добавив --save в команду.