Load CSS as string using JS & Webpack import prefixes
Join Elixir newsletter
Subscribe to receive Elixir news to your inbox every two weeks.
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
Sooner or later you'll have to change the null constraint in one of your DB relations. How to do it easily in Ecto?
So you don’t know what’s the type of struct you’re passing somewhere? Maybe it can be one of few types and you have to distinguish them? Or any other reason… But it’s about checking the struct type. Just use one of the coolest Elixir features - pattern matching!
If you ever had to count occurrences of values in Elixir's list, this short post might be helpful for you!