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.
Related posts
Dive deeper into this topic with these related posts
You might also like
Discover more content from this category
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.
It's a pretty common scenario - you have to place a few elements in equal distances. E.g. unordered list items.
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.