React 中的 CSS 不是样式

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。到scss，进口scss。并安装了 sass，但唯一改变的是身体背景为黑色

Answer 1

使用相对路径。假设 HomePage.js 在组件中，导入应该是import '../assets/css/CSS.module.css'

Answer 2

您原来的帖子有几个问题。

1) jsx 类名语法

您的 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 提供绑定的库。将 Node.js 转换为流行的样式表预处理器 Sass 的 C 版本 LibSass。它允许您本地编译 . scss文件到css

您可以在此处阅读有关node-sass 的更多信息。

一旦您确定了路径，您需要确保正确解释 sass。为了让你的css（sass语法）工作你需要做两件事，因为css不是scss：

1) 将您的 .css 文件重命名为 .scss（然后纱线会显示错误）
2）运行 npm install node-sass （安装 sass） npm install node-sass 并将其添加到您的项目中，方法是将 --save 添加到命令中。