时间戳

首页 > 解决方案 > 如何修复 create-react-app 不加载 CSS 模块？

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

问题描述

我通过 Create-React-App 创建了一个新的反应应用程序，并尝试使用 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 有什么变化吗？

标签： reactjs

解决方案

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

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

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

推荐阅读