Javascript 网页包中的css配置未检测类样式，但检测元素样式

我用webpack和babel来回应。我的网页配置如下。当我将CSS写入div、ul、li等元素时，它会在我的

App.js

中检测到，但当我尝试编写基于类的CSS时，它不会在页面上检测到

webpack.config.js index.css App.js

从“React”导入React；
导入“../index.css”；
常量应用=（）=>(
你好，阿德瓦！！

罗马人
科林斯人
帖撒罗尼迦
以弗所人
菲律宾人
歌罗西书

)
导出默认应用程序；

---

我的react版本是16.8.1，网页是4.29.3。请指导我，因为这个网页配置对我来说非常混乱。

您已通过在css加载程序配置中添加

modules:true

将网页配置为使用css模块。要使用css模块，您必须以javascript对象的形式访问样式，如下所示：

import React from 'react';
import styles from '../index.css';


const App = () => (
  <div>
     <h1>Hello Adeva!!</h1>
     <ul className={styles.test}>
  </div>
)

从“React”导入React；
从“../index.css”导入样式；
常量应用=（）=>(
你好，阿德瓦！！

)

为什么要把事情复杂化

<ul class="test">

---

简单的css和html

谢谢，Mohamed它可以工作，但我从webpack v4 ExtractTextPlugin中了解到不应该使用它。是吗？对不起，我不知道。请在这个问题的上下文中添加解释，而不是一般的HTML。

import React from 'react';
import '../index.css';


const App = () => (
  <div>
     <h1>Hello Adeva!!</h1>
     <ul className="test">
        <li>Romans</li>
        <li>Corinthians</li>
        <li>Thessalonians</li>
        <li>Ephesians</li>
        <li>Phillipians</li>
        <li>Colossians</li>
      </ul>
  </div>
)

export default App;

import React from 'react';
import styles from '../index.css';


const App = () => (
  <div>
     <h1>Hello Adeva!!</h1>
     <ul className={styles.test}>
  </div>
)

<ul class="test">