This bug is evident in any version of Vite after v2.9.1.
When you have an external npm module (in this case, @reintroducing/my-package) that loads its own Sass file as a CSS module, using that file in dev mode works perfectly fine and you can see the CSS associated with the external module reflected in your dev server. But if you build and preview that code, you will see that the CSS for the external module is there but the class is not applied to the element and there is no mention of the module name in the output JS bundle.
- Clone repo and
npm i
. - Run
npm run dev
. Observe the Test button and its blue background. - Inspect the blue button and in dev tools verify that it has the class
Button-module-root
as expected. - Stop the dev server and run
npm run preview
. Observe the Test button and its blue background. - Inspect the blue button and in dev tools verify that it has the class
Button-module-root
as expected. - In the generated
dist
, openassets/index[hash].js
and search forButton-module-root
to verify it is there. - In the generated
dist
, openassets/index[hash].css
and search forButton-module-root
to verify it is there.
- Upgrade Vite to any version after 2.9.1 (2.9.2+, although 2.9.2 is when this bug starts showing up).
- Run
npm i
. - Run
npm run dev
. Observe the Test button and its blue background. - Inspect the blue button and in dev tools verify that it has the class
Button-module-root
as expected. - Stop the dev server and run
npm run preview
. Observe the Test button and the missing blue background. - Inspect the button and in dev tools verify that it no longer has the class
Button-module-root
as expected. - In the generated
dist
, openassets/index[hash].js
and search forButton-module-root
to verify it is no longer there. - In the generated
dist
, openassets/index[hash].css
and search forButton-module-root
to verify it is there.
The code for the external Button
is super simple and can be found here.