Vite构建公共库后CSS无法导入的问题及解决咨询

一、修正package.json的exports配置 #

webpack报错的核心是package.json的exports字段未导出dist/style.css路径，需在公共库的package.json中添加对应导出规则：

{
  "name": "rd-component",
  "exports": {
    ".": "./dist/rd-component.es.js",
    "./dist/style.css": "./dist/style.css",
    // 可选：配置别名简化导入路径
    "./style": "./dist/style.css"
  },
  // 其他原有字段...
}

配置后webpack就能识别该路径，不会再抛出模块找不到的错误。

二、用Vite原生配置提取CSS #

无需自定义插件，Vite库模式本身支持提取独立CSS文件，直接在vite.config.js中配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'RdComponent',
      fileName: (format) => `rd-component.${format}.js`
    },
    rollupOptions: {
      // 排除无需打包的外部依赖（如vue）
      external: ['vue'],
      output: {
        // 为外部依赖指定全局变量
        globals: {
          vue: 'Vue'
        }
      }
    },
    // 强制将CSS提取为单独文件
    cssCodeSplit: true
  }
})

执行vite build后，dist目录会生成独立的style.css文件，与库文件一同输出。

三、简化导入路径（可选） #

如果在exports中配置了./style别名，项目中可直接用更简洁的方式导入：

import 'rd-component/style'

四、排查自定义插件错误 #

你之前遇到的“chunk不存在code属性”问题，多是因为插件在Vite构建钩子中操作了未生成完毕的chunk。若必须自定义插件处理CSS，建议在generateBundle钩子中操作（此时chunk已完成生成）：

export default function myCssPlugin() {
  return {
    name: 'my-css-plugin',
    generateBundle(options, bundle) {
      for (const fileName in bundle) {
        if (fileName.endsWith('.css')) {
          const chunk = bundle[fileName]
          // 此处可安全访问chunk.code
          console.log(chunk.code)
        }
      }
    }
  }
}

不过仍优先推荐使用Vite原生CSS提取配置，避免自定义插件的兼容性问题。

内容的提问来源于stack exchange，提问作者Dolphin