I recently configured my webpack setup with three loaders: babel, css, and file.
Everything seems to be running smoothly; I can easily import my custom CSS files into JSX files and they are bundled correctly using the ExtractTextPlugin!
However, I am encountering an issue when it comes to importing styles from third-party modules like bootstrap.
import "./style/app.css" //this works
import "bootstrap/dist/css/bootstrap.min.css" //this causes a crash
import "css-loader!bootstrap/dist/css/bootstrap.min.css" //this workaround works
Why is it that my loader configuration is not being recognized for third-party modules? As a result, these styles are not being exported by the ExtractTextPlugin.
If I attempt to import bootstrap's CSS within app.css like this:
@import url("~bootstrap/dist/css/bootstrap.min.css")
In this manner, it is successfully imported by the loader.
Another point to note is that bootstrap's CSS brings along additional fonts. When importing through @import, the file-loader is activated as expected!
Unfortunately, if I utilize the css-loader in the JSX, although it imports the CSS, it fails to handle the fonts, preventing the file-loader from being triggered!