How to import a css file in a react component as raw text?

Question

What i trying to do?

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)

Question

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

<style>
styles...
</style>

What do i have now?

I have project created by https://github.com/facebook/create-react-app

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

Answer 1

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.

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.

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.

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.

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.

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.

Answer 2

If you have a webpack config set up you could use the css-loader. see: https://webpack.js.org/loaders/css-loader/#tostring

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

And then import it like:

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