带有 Windicss 的 Vite 库答案

【问题标题】：Vite library with Windicss带有 Windicss 的 Vite 库
【发布时间】：2021-10-05 09:13:02
【问题描述】：

我正在使用 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

【解决方案1】：

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

来自文档

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

【讨论】：