Windicss库

Question

我正在使用Vite (Vue3)和Windi开发一个库。对于构建(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的默认行为是扫描整个src文件夹，但在本例中，我只希望它扫描我添加到条目中的组件。

有什么想法吗？

Answer 1

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

从医生那里

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

对其进行配置。