Vite version 2.9.2 and beyond don't honor external package CSS/Sass module inclusion in output bundle
See original GitHub issueDescribe the bug
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.
Steps to Reproduce Working Version
- 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.
Steps to Reproduce Non-Working Version
- 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.
Reproduction
https://github.com/reintroducing/vite-bug
System Info
System:
OS: macOS 12.3.1
CPU: (10) arm64 Apple M1 Pro
Memory: 80.34 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Browsers:
Chrome: 102.0.5005.61
Firefox: 97.0.1
Safari: 15.4
npmPackages:
@vitejs/plugin-react: ^1.3.0 => 1.3.2
vite: 2.9.1 => 2.9.1
Used Package Manager
npm
Logs
No response
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.
Issue Analytics
- State:
- Created a year ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
vite: importing css/sass into component should not also ...
The styles are correctly injected into the js code when building the app but the component_styles.sass is additionally bundled into a styles.css ...
Read more >vite-plugin-sass-dts - npm
A plugin that automatically creates a type file when using the css module type-safely.. Latest version: 1.2.9, last published: 3 days ago.
Read more >Is Vite the Killer of Webpack? - Better Programming
Bundlers take multiple JavaScript files and combine them into a single file that can run in the browser. This JS bundle contains all...
Read more >rollup-plugin-react-scoped-css - npm package - Snyk
Learn more about rollup-plugin-react-scoped-css: package health score, popularity, security, maintenance, versions and more.
Read more >vite-ruby for JS/CSS asset management in Rails
Webpacker had always been a pain, I started using it to have something to manage and build NPM packages, but was still mid-stream...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@sapphi-red got it, so this is a known issue and not one with my code then. hopefully it can get sorted in the next alpha release. appreciate the quick responses to this issue. for the time being i’ll downgrade to vite 2.9.1 and eagerly await the 3.0.0 release (which will hopefully fix all the bugs 😃
related: #6179