Load CSS as string using JS & Webpack import prefixes

People will tell you it's an antipattern, but what if a library needs you to do this?

Table of contents

    Webpack's raw-loader package can be used to load any file into a string. Experience tells us that sometimes it's just the only way to make something work...

    After adding it to your project's devDependencies, you might run into this issue: how to configure it in my create-react-app project where there's no webpack.config.js file accessible?

    It turns out that Webpack has a concept of inline loader usage with import prefixes:

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

    This will load the raw contents of foo.css into a variable. Since create-react-app has a very strict linter that isn't happy with this, a directive to suppress the linter's objection is needed, too.

    Download our ebook
    Sign to our Newsletter
    Michał Buszkiewicz, Elixir Developer
    Michał Buszkiewicz Curiosum Founder & CTO

    Read more
    on #curiosum blog