無法在 CRA 2.0 中使用 CSS 模塊

Question

React 現在支持 CRA 中的 CSS 模塊而無需彈出。 但我仍然無法使用它們。

"dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1"
  },

我的 react-scripts 版本也 > 2.0

import React from "react";

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

const Layout = props => {
  return (
    <React.Fragment>
      <div>Toolbar, SideDrawer, Backdrop</div>
      <main className={classes.Content}>{props.children}</main>
    </React.Fragment>
  );
};

export default Layout;

布局.css

.Content {
  margin: 10rem;
}

我按照這里提到的那樣使用它們

https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet 。

這是我得到的錯誤：

./src/components/Layout/Layout.js
Module not found: Can't resolve './Layout.module.css' in '/home/tft/Desktop/My_Workspace/Reactjs-Projects/Personal Projects/burger-king/src/components/Layout'

Answer 1

在您的問題中，您指出 css 文件名為Layout.css ，但我認為它應該是Layout.module.css才能工作。 或者你只是忘記在這里正確命名？