没有为 React App 加载 CSS 模块

Question

我是 React 新手，所以这可能是一个简单的错误。我无法在我的 React 应用程序上看到我的任何 CSS 样式。我不知道我是否必须启用 CSS 模块或其他任何东西。但是，我听说最近的 create-react-app 版本中包含该功能。任何帮助将不胜感激，谢谢！

代码如下：

汉堡.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;

    };

};

Answer 1

如果您打算创建一个 CSS 模块，然后在您的组件中使用它来确定范围，根据CRA，您应该使用模块扩展名定义您的 CSS 文件。当您不.module为样式表文件使用扩展名时，您应该像往常一样导入它们，并且您也不能限定它们的范围。所以它会是这样的：import "./BurgerIngredients.css";... // other parts of your componentrender(){&nbsp; return <div className="BreadBottom"></div>;}但是，如果您想使用 CSS 模块并确定您的样式的范围，您的样式表文件应该是BurgerIngredients.module.css，BurgerIngredients.css然后您可以像之前所做的那样在没有任何范围问题的情况下导入它。import classes from "./BurgerIngredients.module.css";... // other parts of your componentrender(){&nbsp; return <div className={classes.BreadBottom}></div>;}

Answer 2

你在这里做的错误是你用一个名字来调用你的css例子：import&nbsp;classes&nbsp;from&nbsp;"./BurgerIngredients.css";然后你使用 inline 像这样附加类名例子：&nbsp;<div&nbsp;className={classes.Meat}></div>;您的 css 类名不是对象，因此您不能这样称呼它。相反，您所要做的就是像这样导入 css（确保 css 文件与 js 文件位于同一文件夹中，因为这里我们通过 调用文件./）例子：&nbsp;import&nbsp;"./BurgerIngredients.css";并像在这样的普通 html 中那样使用 className例子：&nbsp;<div&nbsp;className="BreadBottom"></div>;