react 使用 css 进行模块化的问题?

Question

我在编写一个练习项目, 写了一个样式如下
.test { background-color: red; }
在引用的时候发现会污染全局(也就是别的地方有相同类名也会使用到这个样式), 改用样式模块化

引用代码

import indexClassName from './index.module.sass'

sass 内的代码
.test { background-color: red; }

我在引用的时候

<div className={indexClassName.test}>
    <p>
        You clicked
        times
    </p>
    <TestCoponent />
</div>

发现虽然样式的 test 生成了模块化的名字, 但是无法呈现出样式?

我找不到问题在哪里? 有谁帮我解决一下吗?

webpack.config.js 内有配置

{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      modules: true,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment
    },
    'sass-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
  test: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent
      },
    },
    'sass-loader'
  ),
},

Answer 1

已经解决 貌似使用了关键字 index , 换成 Index 就可以了