I just joined a project and noticed that the stylesheet is imported into each page's JS file as such:
import "../../style.css";
Now, I'm used to seeing CSS stylesheets linked in HTML files as follows:
<head>
<link rel="stylesheet" href="styles.css">
</head>
The project is using Javascript/jQuery and Vite.js as an alternative to Webpack. I looked at the Vite documentation and saw that the example projects use the CSS @import, but there's no information on why that is in particular.
Is there any reason to import the stylesheet into JS files, rather than linking to the HTML files? Or vice versa? Not looking for opinions here, I'm wondering if there are best practices or advantages/disadvantages to consider with one approach or another.
It hands off the decision about when to include different bits of CSS to the bundler (e.g. webpack) instead of including every bit of CSS everywhere.
Further reading: Tree shaking CSS Modules