如何在Vite配置中排除node_modules中的指定CSS文件？

数据老陈

2026-6-21

解决Vite构建时排除特定node_modules中CSS文件的问题

你用rollupOptions.external无效是因为这个选项仅针对JavaScript模块，对CSS这类资源文件不生效。要实现按环境变量排除指定CSS的需求，可以通过自定义Rollup插件或现成插件来拦截并跳过这些文件的处理。

方案一：自定义Rollup插件

直接在Vite配置中编写轻量插件，精准拦截目标CSS文件：

// vite.config.js
import { defineConfig } from 'vite';

const disableStylings = process.env.VITE_APP_STYLES_ENABLED === "false";
// 用正则匹配Rollup解析后的模块ID（避免路径格式差异问题）
const excludeStylings = disableStylings
  ? [
      /@module-here\/dist\/assets\/css\/styles\.css/,
      /@module-here\/dist\/assets\/themes\/<brand-here>\/styles\.css/,
    ]
  : [];

export default defineConfig({
  // 其他原有配置...
  build: {
    rollupOptions: {
      plugins: [
        {
          name: 'exclude-specified-css',
          resolveId(id) {
            // 匹配到目标CSS文件时，标记为外部资源，Rollup会跳过打包
            if (excludeStylings.some(regex => regex.test(id))) {
              return { id, external: true };
            }
          }
        }
      ]
    }
  }
});

方案二：使用现成插件`rollup-plugin-ignore`

如果不想写自定义插件，可借助现成工具快速实现：

安装插件

npm install rollup-plugin-ignore --save-dev

修改Vite配置

// vite.config.js
import { defineConfig } from 'vite';
import ignore from 'rollup-plugin-ignore';

const disableStylings = process.env.VITE_APP_STYLES_ENABLED === "false";
const excludeStylings = disableStylings
  ? [
      '@module-here/dist/assets/css/styles.css',
      '@module-here/dist/assets/themes/<brand-here>/styles.css',
    ]
  : [];

export default defineConfig({
  // 其他原有配置...
  build: {
    rollupOptions: {
      plugins: [ignore(excludeStylings)]
    }
  }
});