没有为 React App 加载 CSS 模块

Question

我是 React 新手，所以这可能是一个简单的错误。我无法在我的 React 应用程序上看到我的任何 CSS 样式。我不知道我是否必须启用 CSS 模块或其他任何东西。但是，我听说最近的 create-react-app 版本中包含该功能。任何帮助将不胜感激，谢谢！代码如下：汉堡.jsimport 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.jsimport React, {Component} from "react";import classes from "./BurgerIngredients.css";import PropTypes from "prop-types"; //to see if props are of valid typesclass 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;    };};

Answer 1

如果您打算创建一个 CSS 模块，然后在您的组件中使用它来确定范围，根据CRA，您应该使用模块扩展名定义您的 CSS 文件。

当您不.module为样式表文件使用扩展名时，您应该像往常一样导入它们，并且您也不能限定它们的范围。

所以它会是这样的：

import "./BurgerIngredients.css";

... // other parts of your component

render(){

  return <div className="BreadBottom"></div>;

}

但是，如果您想使用 CSS 模块并确定您的样式的范围，您的样式表文件应该是BurgerIngredients.module.css，BurgerIngredients.css然后您可以像之前所做的那样在没有任何范围问题的情况下导入它。

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

... // other parts of your component

render(){

  return <div className={classes.BreadBottom}></div>;

}

Answer 2

你在这里做的错误是你用一个名字来调用你的css

例子：

import classes from "./BurgerIngredients.css";

然后你使用 inline 像这样附加类名

例子：

 <div className={classes.Meat}></div>;

您的 css 类名不是对象，因此您不能这样称呼它。

相反，您所要做的就是像这样导入 css（确保 css 文件与 js 文件位于同一文件夹中，因为这里我们通过 调用文件./）

例子：

 import "./BurgerIngredients.css";

并像在这样的普通 html 中那样使用 className

例子：

 <div className="BreadBottom"></div>;