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?

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.