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

import css from './public/someFile.module.css';
...
class App extends Component {
    ponentDidMount() {
        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", …}

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./facebook/create-react-app

import css from './public/someFile.module.css';
...
class App extends Component {
    ponentDidMount() {
        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", …}

• javascript
• reactjs

• I think the problem that you have it's that you are using css-modules so what you get from importing that file it's an object with the naming references generated by this loader in the Webpack build. It's also important to mention that since you are using create-react-app you don't have full control over the build automation. – Juan Rivas Commented Mar 17, 2019 at 10:33

2 Answers 2

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 {
  ponentDidMount() {
    console.log(css);
  }
}

Edit

I'm going to edit my answer because it won't work for you, but the original answer could e 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 ponent. 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 ponent, 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 plete 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 {
  ponentDidMount() {
    console.log(css);
  }
}

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

If you have a webpack config set up you could use the css-loader. see: https://webpack.js/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 {
    ponentDidMount() {
        console.log(css.toString();
    }