CSS模块类名未定义 [英] CSS Modules class names undefined

问题描述

我尝试在我的项目中使用CSS模块。我正在使用带有2.2.1版本的React脚本的最新Create React App。
在 docs 它说我可以添加CSS模块，而不必执行弹出脚本。

I try to use css modules in my project. I'm using latest Create React App with react-scripts version 2.1.8. In the docs it says I can add CSS Modules, and i dont have to do eject script.

我试图做同样的事情，但是我的样式是空的并且类是未定义的。
这是我的组件之一的代码：

I tried to do the same way, but my styles are empty and classes are undefined. Here is the code for one of my components:

import React, { Component } from 'react';
import styles from './Catalog.css';

class Catalog extends Component{

render() {
    console.log('styles.catalog '+ styles.catalog); //returns: styles.catalog undefined.
    return (
      <div className={styles.catalog}> //returns: <div>
        ...
      </div>
    )
}

Catalog.css：

Catalog.css:

.catalog {
  min-width: 800px;
}

推荐答案

在文档，其中提到您必须命名文件如下：

In the docs, it's mentioned that you have to name the file as follow :

[name] .module.css

[name].module.css

尝试将文件重命名为： Catalog.module.css 并像这样导入：

Try renaming the file to : Catalog.module.css and import it like this :

import styles from './Catalog.module.css';

这篇关于CSS模块类名未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！