无法在反应应用程序中导入多个 CSS 文件答案

【问题标题】：Unable to import multiple CSS file in react app无法在反应应用程序中导入多个 CSS 文件
【发布时间】：2021-09-03 18:08:20
【问题描述】：

我正在尝试导入以导入不同的 css 文件，用于反应应用程序中的不同元素。但它不是进口的。我做错了什么？

recipe.js

import React from "react";
import style from "style.modules.css";

const Recipe = ({ title, calories, image, ingredients }) => {
  return (
    <div className={style.recipe}>
      <h1>{title}</h1>
      <ol>
        {ingredients.map((ingredient) => (
          <li>{ingredient.text}</li>
        ))}
      </ol>
      <p>Calories={calories}</p>
      <img className={style.image} src={image} alt=''></img>
    </div>
  );
};

export default Recipe;

style.modules.css

.recipe{
    border-radius: 10px;
    box-shadow: 0px 5px 20px rgb(71, 71, 71);
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: white;
    align-items: center;
    min-width: 40%;
}

.image{
    border-radius: 50%;
    width:  100px;
    height: 100px;
}

我想要它的样子，

我得到了什么，

【问题讨论】：

您是否检查过 DOM 以查看应用或覆盖了哪些样式/CSS 规则等？
Ctrl Shift I 你会看到类没有被应用。如果你想使用，你将不得不做'image'和'recipe'。
检查导入路径是否正确。
这可能无关紧要，但 css 模块文件通常采用 style.module.css 而不是 style.modules.css 的形式。尝试重命名您的文件和导入。可能 webpack 很尴尬。
@Netranjit，首先，找出应用 CSS 类的位置（例如，.recipe）。如果没有使用重复项，请同时检查导入路径。并且...确保您的组件按预期应用。 :)

标签： javascript css reactjs react-hooks use-effect

【解决方案1】：

css 文件名很重要，应该是 [name].module.css。

import React from "react";
import style from "./style.module.css";

有一个codesandbox供参考。

详情在：
https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

【讨论】：

我试着按照你的方式，得到这个回复 ./src/component/Recipe.js Module not found: Can't resolve './style/module.css' in 'C:\Users\联想\桌面\recipe\src\component'
文件结构是什么？