如何修复 create-react-app 不加载 CSS 模块？

Question

我通过 Create-React-App 创建了一个新的 React 应用程序，并尝试使用 CSS 模块，但它似乎不再起作用了。这是我对 CSS 模块的简单用法：

import styles from './myStyle.css';

function App() {
  return (
    <div className={styles.container}>
    </div>
  );
}

它适用于我的旧项目，我的旧项目与新项目的唯一区别是 react-scripts 版本。

我的新项目依赖项：

 "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.0"
  }

我的旧项目依赖项：

 "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8"
  },

react-scripts v3 有什么变化吗？

Answer 1

要使用 CSS 模块，您应该将文件命名为[name].module.css：

该项目使用[name].module.css文件命名约定支持 CSS 模块和常规样式表。CSS Modules 允许通过自动创建格式的唯一类名来确定 CSS 的范围[filename]\_[classname]\_\_[hash]。