Load CSS as string using JS & Webpack import prefixes

Article autor
September 9, 2025
Load CSS as string using JS & Webpack import prefixes
Elixir Newsletter
Join Elixir newsletter

Subscribe to receive Elixir news to your inbox every two weeks.

Oops! Something went wrong while submitting the form.
Elixir Newsletter
Expand your skills

Download free e-books, watch expert tech talks, and explore open-source projects. Everything you need to grow as a developer - completely free.

Table of contents

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

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.

Related posts

Dive deeper into this topic with these related posts

No items found.

You might also like

Discover more content from this category

How to check if a set contains exact values with Jest in JS?

TLDR: With jest-extended package you can write: expect([...set]).toIncludeSameMembers([value1, value2]);. If you are looking to a native, but longer solution scroll down a bit.

Style spacing between repeated elements in CSS using flex gap

It's a pretty common scenario - you have to place a few elements in equal distances. E.g. unordered list items.

How to Lazy-Load external scripts for better page speed?

Nowadays, with an ever-growing number of web services, we tend to overload Web apps with external resources. As a result, it decreases page load speed and affects SEO score. There is a pretty easy solution for that.