原始答案

Question

我想做什么？

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

问题

如何将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", …}

Answer 1

原始答案

如果您使用的是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-modules加载程序正在处理您的css文件，因此您将无法获得原始css，因为这不是css-modules的目的。相反，您将得到的是一个带有此加载程序生成的命名引用的对象。

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

万一您确实需要在组件中执行此操作，则应将文件重命名为style.css，而不使用.module.css扩展名。 create-react-app会改为使用post-css加载程序来处理文件，这样您就可以获取CSS。

您仍然需要使用raw-loader来预处理css，并且由于您无法完全控制create-react-app的构建，并且如果有人尝试这样做，它们会严格抛出异常。。您需要禁用该行的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);
  }
}

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

Answer 2

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

css-loader

然后将其导入：

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

如何将React组件中的CSS文件作为原始文本导入？

2 个答案:

原始答案

编辑