Vite generates multiple copies of the same stylesheet
Problem
Describe the bug I am using the following vite config option to make global styles available in React components without requirement of usage of "@import '../../syles/main" in each component file: [code block] it comes from https://github.com/vitejs/vite/issues/832 My main.scss looks like: [code block] where fonts, colors, breakpoints, animations, layers include global variables. It works fine in part I can use my variables inside component without importing the main SCSS file, but such approach causes an issue that I have multiple copies of the same stylesheet in a head section of page ( see the screenshot: https://imgur.com/a/k6hGnbP ) Reproduction 1. Create empty app (Vite, React, TSX) 2. Create a global main.scss file 3. Import partials _colors.scss and _fonts.scss to main.scss using @import 4. Create vite.config.js with option similar to described in a bug description section 5. Create at least two different components and add it to your App 6. Add some variables to colors.scss and fonts.scss 7. Use variables from colors.scss and fonts.scss in your two components from step 5 using build-in CSS modules support ([component].module.scss) 8. Run your app and look at head section Expected result: There is only one global stylesheet. Actual result: There are multiple copies of global stylesheet, where number of copies equals number of unique components, UPDATE: I've created a simplified app which one reproduces the issue: https://github.com/tastytea-github/vite-global-i
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix Multiple Copies of Global Stylesheet in Vite
The issue arises because Vite's CSS handling creates a new instance of the global stylesheet for each component that uses the global variables. This happens due to the way CSS modules are processed, leading to multiple inclusions of the same stylesheet in the head section of the HTML document.
Awaiting Verification
Be the first to verify this fix
- 1
Modify Vite Configuration
Update the Vite configuration to ensure that the global stylesheet is only included once. This can be done by utilizing the 'css.preprocessorOptions' to include the global styles in the build process.
javascriptexport default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: '@import "src/styles/main.scss";' } } } }); - 2
Remove Direct Imports of Global Styles
Ensure that you do not directly import the global stylesheet in any component files. This will prevent Vite from creating multiple instances of the stylesheet.
javascript// Remove any imports like this: // import '../../styles/main.scss'; - 3
Use CSS Modules for Component Styles
Continue using CSS modules for component-specific styles. Ensure that component styles are defined in separate .module.scss files to prevent conflicts with global styles.
scss// Example component styles: // styles.module.scss .button { background-color: $primary-color; } - 4
Test the Application
Run the application using 'npm run dev' and check the head section of the HTML document to confirm that only one instance of the global stylesheet is included.
bashnpm run dev - 5
Verify Global Styles Functionality
Ensure that the global variables from the main.scss file are accessible in your component styles and that there are no errors related to missing variables.
javascript// Example usage in a component: // import styles from './Component.module.scss'; // <div className={styles.button}>Click Me</div>
Validation
To confirm the fix worked, check the head section of your HTML document after running the application. There should be only one instance of the global stylesheet. Additionally, verify that the global variables are still accessible in your components without any import statements.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep