Load CSS as string using JS & Webpack import prefixes
Join Elixir newsletter
Subscribe to receive Elixir news to your inbox every two weeks.
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.
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.
Work with a team that keeps learning and building better software every day.
Related posts
Dive deeper into this topic with these related posts
You might also like
Discover more content from this category
Sometimes you need to do some database operations at once. A simple example: User-A transfers money to User-B. Updating just one balance at the time creates a risk of data desynchronization. What if the first DB operation goes well but updating the second user’s data fails? Sounds like a hard to catch vulnerability.
Did you ever create a commit that you wish never happened? Let's be honest - we all did. There is an easy way to revert it in Git.
Each of us had a situation, where we had to invoke a few, same commands each time. Making it once is not that problematic, but when we are supposed to repeat given operations, it may be better just to create one function that will handle it all.