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

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
– Juan Rivas, Commented Mar 17, 2019 at 10:33

Juan Rivas · Accepted Answer · 2019-03-17 11:25:39Z

11

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.

edited Mar 17, 2019 at 11:25

answered Mar 17, 2019 at 10:02

Juan Rivas

6031 gold badge5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Max Gorbunov Over a year ago

i created project by github.com/facebook/create-react-app, looks like i don't have webpack, is there other options?

Juan Rivas Over a year ago

create-react-app it's using Webpack under the hood. But you don't have complete control over it. Let me check if there's a workaround and I would modify my answer. By the way, you should mention this in your question because the solution depends also in the way create-react-app is processing the files you are importing.

theaceofthespade Mar 23 at 23:00

just as an example of a use case: I have a react component that sometimes needs to inject css files into iframes/pages

mstruebing · Accepted Answer · 2019-03-17 10:11:02Z

1

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();
    }

edited Mar 17, 2019 at 10:11

answered Mar 17, 2019 at 9:55

mstruebing

1,8221 gold badge19 silver badges35 bronze badges

3 Comments

Max Gorbunov Over a year ago

it seems like it doesn't contain styles, i tried it right now and that i have as result:

"{"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","jodit_inline":"jodit_jodit_inline__NrR5j","jodit_disabled":"jodit_jodit_disabled__23Tgx"....

mstruebing Over a year ago

But the styles are actually written in that file?

Max Gorbunov Over a year ago

yep, file contains styles

Collectives™ on Stack Overflow

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

2 Answers 2

Original answer

Edit

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Original answer

Edit

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related