我想做什么？

我已经使用所见即所得来创建一些小的 html 页面，稍后它会发送请求以在后端保存该 html 页面。所以我需要添加css来请求从父页面添加所有样式（在页面包含编辑器中）

Question

如何将 css 文件作为原始字符串导入以将其添加到以后的请求类型中？

<style>
styles...
</style>

我现在有什么？

我有由以下人员创建的项目https://github.com/facebook/create-react-app

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

但它像对象一样记录：

{jodit: "jodit_jodit__zIMF7", jodit_container: "jodit_jodit_container__opKkw", jodit_workplace: "jodit_jodit_workplace__1FVd6", jodit_wysiwyg: "jodit_jodit_wysiwyg__35mmG", jodit_wysiwyg_iframe: "jodit_jodit_wysiwyg_iframe__1-Yky", …}

原答案

如果您使用 Webpack，您有原始装载机导入文件并在构建中解析为字符串。

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

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

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

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

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

Edit

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

首先，我不明白为什么你可能想要将原始 css 发送到后端以及为什么你想要从 React 组件中执行此操作。您的 css 文件正在由CSS模块loader，所以你将无法获取原始 css，因为这不是 css-modules 的目的。相反，您将得到的是一个带有此加载程序生成的命名引用的对象。

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

如果您确实需要在组件中执行此操作，那么您应该将文件重命名为style.css没有.module.css扩大。这create-react-app会处理你的文件post-cssloader 代替，这将允许你获取 css。

您仍然需要使用以下命令预处理您的 cssraw-loader并且由于您无法完全控制create-react-appbuild 并且他们有严格的 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);
  }
}

希望这可以帮助您，尽管这只是一种解决方法并且不推荐。