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
    Michał Buszkiewicz, Elixir Developer
    Michał Buszkiewicz Curiosum Founder & CTO

    Read more
    on #curiosum blog

    7 Reasons Why You Might Need a Custom Marketing Tool

    Managing a marketing agency or introducing a company to digital transformation in the area of marketing, requires an extraordinary focus on the tools that you should use. Usually, they facilitate the work of marketers and allow you to achieve the expected results of each project and advertising campaign you are working on.

    How to upload a file in Elixir with Waffle

    The ability to upload files is a key requirement for many todays web and mobile applications. In this tutorial, we will look at how we can accomplish file uploads to local storage and S3 server in Phoenix with the help of Waffle library.