时间戳

首页 > 解决方案 > 带有 Windicss 的 Vite 库

vite - 带有 Windicss 的 Vite 库

问题描述

我正在使用 Vite (Vue3) 和 Windi CSS 来开发一个库。我正在使用库模式进行构建（https://vitejs.dev/guide/build.html#library-mode），配置如下：

vite.config.js

export default defineConfig({
  plugins: [vue(), WindiCSS()],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/lib.js'),
      name: 'MyLIB',
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['vue'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
});

我的入口文件 ( src/lib.js) 中仅包含几个 Vue 组件，如下所示：

lib.js

export { default as AButton } from './components/AButton/AButton.vue';
export { default as ACheckbox } from './components/ACheckbox/ACheckbox.vue';
import 'virtual:windi.css';
import './assets/fonts.css';

当我构建库时，我只为那些组件获取了 js，但 css 是针对文件src夹中的每个 Vue 文件的，而不仅仅是我包含在我的lib.js文件中的那些。我知道 Windi CSS 的默认行为是扫描整个src文件夹，但在这种情况下，我只希望它扫描我添加到条目中的组件。

有任何想法吗？

标签： vite

解决方案

您应该能够通过使用extract.include和extract.exclude选项来限制扫描，请参见： https ://windicss.org/guide/extractions.html#scanning

从文档

如果要启用/禁用对其他文件类型或位置的扫描，可以使用包含和排除选项进行配置

推荐阅读