如何在React组件中将CSS文件作为原始文本导入? [英] How to import a css file in a react component as raw text?

问题描述

我想做什么?

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

I already have WYSIWYG to create some small html pages, later it send request to save that html page in backend. So i need to add css to request for adding all styles from parent page(in page contains editor)

问题

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

How to import css file as raw string to add it to later request kind like that?

<style>
styles...
</style>

我现在有什么?

我有一个由 https://github.com/facebook/create-react-创建的项目应用

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

但是它像对象一样记录:

But it logs like object:

{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，则可以使用 raw-loader 来导入文件并在您的版本中解析为字符串.

Original answer

In case you are using Webpack, you have the raw-loader to import files and being resolved in your build as a string.

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

Considering that you want to process every .css file in your project. Just add a rule in your Webpack configuration:

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

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

In case you only want to do this for just one file, you can specify the loader you want to use for that file when you are importing it:

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

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

编辑

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

Edit

I'm going to edit my answer because it won't work for you, but the original answer could come in handy for others.

首先，我不知道为什么您可能想要将原始CSS发送到后端以及为什么要从React组件中进行此操作的原因是什么?您的CSS文件正在由 css-modules 加载程序进行处理，因此您不会能够获取原始的CSS，因为这不是CSS模块的目的.相反，您将得到的是一个带有此加载程序生成的命名引用的对象.

First of all, I'm missing what's the reason why you may want to send the raw css to a back-end and why you want to do this from a React component. Your css file is being processed by the css-modules loader, so you won't be able to get the raw css because that's not the purpose of css-modules. What you will get instead, it's an object with the naming references generated by this loader.

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

I searched if there is any way to get also the styles and I couldn't find anything because css-modules is not intended to do that. What you can do instead to get the css files is getting it directly from the build output. Since you are using create-react-app that would be in the /build folder in the root of your directory.

如果确实需要在组件中执行此操作，则应将文件重命名为 style.css ，而无需扩展名 .module.css . create-react-app 将使用 post-css 加载程序代替来处理您的文件，这将允许您获取CSS.

In case you really need to do this in the component, then you should rename your file to style.css without the .module.css extension. The create-react-app would process your file with the post-css loader instead, which will allow you to get the css.

您仍然需要使用 raw-loader 预处理CSS，并且由于您无法完全控制 create-react-app 构建，因此它们具有如果有人尝试这样做，则使用严格的lint引发异常.您需要禁用该行的linter，然后使用raw-loader导入css.

You still would need to preprocess your css with the raw-loader and since you don't have complete control over the create-react-app build and they have a strict linter to throw exceptions if anyone tries to do this. You would need to disable the linter for that line and import the css with the raw-loader instead.

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

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

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

Hope this could help you, though it's just a workaround and it's not recommended.

这篇关于如何在React组件中将CSS文件作为原始文本导入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！