原答案

如果您使用 Webpack，您可以使用raw-loader导入文件并在构建中作为字符串解析。

考虑到您要处理.css项目中的每个文件。只需在您的 Webpack 配置中添加一条规则：

{
    test: /\.css$/i,
    use: 'raw-loader',
}

如果您只想对一个文件执行此操作，则可以在导入该文件时指定要用于该文件的加载程序：

import css from 'raw-loader!./styles.css';

class App extends Component {
  componentDidMount() {
    console.log(css);
  }
}

编辑

我将编辑我的答案，因为它对您不起作用，但原始答案对其他人可能会派上用场。

首先，我不知道您可能想要将原始 css 发送到后端的原因是什么，以及您想要从 React 组件执行此操作的原因是什么。您的 css 文件正在由css-modules加载器处理，因此您将无法获取原始 css，因为这不是 css-modules 的目的。你会得到什么，它是一个对象，带有由这个加载器生成的命名引用。

我搜索了是否有任何方法可以获得样式，但我找不到任何东西，因为 css-modules 不打算这样做。你可以做的是直接从构建输出中获取 css 文件。由于您正在使用create-react-app它，它将位于/build您目录根目录中的文件夹中。

如果您确实需要在组件中执行此操作，则应将文件重命名为style.css不带.module.css扩展名。该create-react-app会处理与您的文件post-css加载器来代替，这将让你得到的CSS。

您仍然需要使用 和 预处理您的 css，raw-loader因为您无法完全控制create-react-app构建，并且如果有人尝试这样做，它们有一个严格的 linter 来抛出异常。您需要禁用该行的 linter 并使用 raw-loader 导入 css。

/* eslint import/no-webpack-loader-syntax: off */
import css from '!!raw-loader!./styles.css';

class App extends Component {
  componentDidMount() {
    console.log(css);
  }
}

希望这可以帮助您，尽管这只是一种解决方法，不建议这样做。

如果您设置了 webpack 配置，则可以使用css-loader. 见：https : //webpack.js.org/loaders/css-loader/#tostring

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['to-string-loader', 'css-loader'],
      },
    ],
  },
};

然后像这样导入：

import css from './public/someFile.module.css';
...
class App extends Component {
    componentDidMount() {
        console.log(css.toString();
    }