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?
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.