rollupjs - Why does Vite sometimes replace my CSS imports with * empty css *? - Stack Overflow

admin管理员组

文章数量:1336660

I'm developing a library of React components that uses Vite to build, and I've run into a strange problem.

Normally, when I build, each .ts(x) file that references an scss file appears in the output directory as a .js file, and the scss import in the .ts(x) file is converted to a css import in the corresponding .js file, with the css file being placed in the assets directory. For instance, ValidationWrapper.tsx compiles to ValidationWrapper.js, and the statement import './ValidationWrapper.scss' changes to import "../../../../assets/ValidationWrapper.css".

However, after making code changes to various files throughout the repository, which do not include ValidationWrapper.tsx or .scss, nor our vite config files, this import statement in ValidationWrapper.js is now replaced with an auto-generated comment saying /* empty css */. Note that the validation wrapper component is still in use, its SCSS file is not empty, and this removed import means it now is not styled.

What causes vite to evaluate a css file as not needing to be imported, and can I mark it in such a way that it will not drop the import? Why would it be imported sometimes, but not other times?

My current Vite config is below.

import react from '@vitejs/plugin-react';
import svgrPlugin from 'vite-plugin-svgr';
import path, { extname, relative } from 'path';
import * as packages from './package.json';
import { libInjectCss } from 'vite-plugin-lib-inject-css';
import { fileURLToPath } from 'node:url';
import { glob } from 'glob';

const excludedPatterns = ['__mocks__', '.test.', 'setupTests'];

// /config/
export default defineConfig({
  test: {
    globals: true,
    coverage: {
      provider: 'istanbul',
      reporter: ['text', 'html'],
      exclude: ['**/node_modules/**', '**/lib/**'],
    },
    environment: 'jsdom',
    setupFiles: ['./src/setupTests.ts'],
    testFiles: ['./src/**/*.test.tsx'],
    exclude: [
      '**/node_modules/**',
      '**/lib/**',
      '**/.{idea,git,cache,output,temp}/**',
      '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*',
    ],
  },
  plugins: [react(), svgrPlugin(), libInjectCss()],
  build: {
    copyPublicDir: false,
    cssCodeSplit: true,
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'anonymizedName',
      fileName: (format) => `index.${format}.js`,
      formats: ['es'],
    },
    rollupOptions: {
      external: [
        ...Object.keys(packages.dependencies),
        ...Object.keys(packages.peerDependencies),
        /__mocks__/,
        /setupTests/,
      ]
        .map((key) => [key, new RegExp(`^${key}.*`, 'i')])
        .flat(),
      input: Object.fromEntries(
        glob
          .sync('src/**/!(*.d).{ts,tsx}')
          .map((file) => {
            if (excludedPatterns.some((pattern) => file.includes(pattern))) {
              return; // Exclude this file
            }
            return [
              relative('src', file.slice(0, file.length - extname(file).length)),
              fileURLToPath(new URL(file, import.meta.url)),
            ];
          })
          .filter((i) => i),
      ),
      output: {
        dir: 'lib',
        preserveModules: false,
        chunkFileNames: 'chunks/[name].[hash].js',
        assetFileNames: 'assets/[name][extname]',
        entryFileNames: '[name].js',
        sourcemap: true,
        globals: {
          'react/jsx-runtime': 'jsxRuntime',
          react: 'React',
          'anonymizedName2': 'anonName2',
          'anonymizedName3': 'anonName3',
          axios: 'axios',
        },
      },
      treeshake: true,
    },
  },
  exclude: ['src/core/components/**/*.test.tsx', 'src/core/__mocks__/**/*', 'coverage/**/*'],
});

Note: I won't be able to post a link to the whole repository since it is proprietary and very large, and I am not sure exactly what change caused the issue so I won't be able to set up a reproducible example. If anyone knows just what causes the /* empty css */ comment and how to prevent it, that would help. Also, I did try changing cssCodeSplit from true to false, but it did not have any effect on the output. (The CSS did not all compile into a single file as the documentation said it should with this setting set to false.)

本文标签： rollupjsWhy does Vite sometimes replace my CSS imports with * empty css *Stack Overflow