我假设你在你的webpack中使用css加载器。你需要启用modules：true

{
  loader: 'css-loader',
  options: { 
    modules: true
  }
}

如果你不想让这个行为成为默认行为，在你的css中你可以用途：

// sCSS
:local .yourClass {...}

// JS

import cls from '../yourCss.scss'

const Component = () => (
  <div className={cls.yourClass} />
)

// yourClass will become some random hash
// or something else based on your css loader config

如果你有模块：如果你不想让css loader编译你的类，你可以使用

// CSS
:global .yourGlobalClass {...}

// JS
import '../yourCss.scss'

const Component = () => (
  <div className="yourGlobalClass" />
)

请参阅文档：https://github.com/webpack-contrib/css-loader和https://github.com/css-modules/css-modules

尝试将.scss文件扩展名重命名为.module.scss**
如果sass-loader有问题，或者您没有将其配置为支持.scss文件-它的原始scss将仅支持.module.scss扩展名。
我也遇到了同样的问题，它解决了我的问题。
你也可以检查here我问的问题。

导入样式表只会告诉Webpack或其他构建工具处理该样式表并将其包含在输出文件中。据我所知，它不允许您使用它来模板化JSX。因此，只需导入它，您的样式将在构建周期发生后可用。您不需要以任何方式实际使用它。
className接受一个字符串并直接转换为html class-所以就像这样使用它。

/* loginScreen.js */

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

class loginScreen extends Component {
  render() {
    return (
      <div className={ 'form' }>

      </div>
    );
  }
}

export default loginScreen;

您的webpack配置中可能缺少 sass-loader。请查看此处，
我的建议是放弃 sass 而使用 postcss，它是广泛的，并且可以像上面代码中使用类的方式工作。
对于postcss安装和配置检查这里

一些步骤将解决您的问题

1.文件名必须是：FileName.module.css

1.导入文件到App.js

1.用于组件

1.浏览器

试试这个：

import * as styles from '../styles/main.scss'