vite打包组件库时，设置cssCodeSplit不生效

vite的配置

import {defineConfig} from "vite"
import vue from "@vitejs/plugin-vue"
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@/": new URL("./src/", import.meta.url).pathname
    }
  },
  build: {
    cssCodeSplit: true,
    lib: {
      entry: path.resolve(__dirname, "./src/components/index.ts"), //指定组件编译入口文件
      name: "vue3-gird-layout",
      fileName: "vue3-grid-layout",
      formats: ["es", "umd"]
    },
    rollupOptions: {
      external: ["vue"],

      output: {
        globals: {
          vue: "Vue"
        }
      }
    }
  }
})

官方文档对这个字段的解析(https://cn.vitejs.dev/config/build-options.html#build-assetsinlinelimit)

启用/禁用 CSS 代码拆分。当启用时，在异步 chunk 中导入的 CSS 将内联到异步 chunk 本身，并在其被加载时插入。
如果禁用，整个项目中的所有 CSS 将被提取到一个 CSS 文件中。

注意： 如果指定了 build.lib，build.cssCodeSplit 会默认为 false。

因此，手动改为true,但是发现没有生效

然后看了下vite的版本，由于最近vite更新到3.x了，但是这个功能可能被干掉了，然后文档没有更新？ 我猜测时这样

因此，只能另寻他法，既然不能生成行内样式，那么就在打包的js代码中加入下面的代码

import './style.css'

然后这个让vite插件做好了

因此，找到vite-plugin-libcss

修改vite.config.ts

import {defineConfig} from "vite"
import vue from "@vitejs/plugin-vue"
import path from "path"
import libCss from "vite-plugin-libcss"
import dts from "vite-plugin-dts"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), libCss(), dts()],
  resolve: {
    alias: {
      "@/": new URL("./src/", import.meta.url).pathname
    }
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, "./src/components/index.ts"), //指定组件编译入口文件
      name: "vue3-gird-layout",
      fileName: "vue3-grid-layout",
      formats: ["es", "umd"]
    },
    rollupOptions: {
      external: ["vue"],

      output: {
        globals: {
          vue: "Vue"
        }
      }
    }
  }
})

最终打包成功， 引入组件，不再需要再引入组件的css代码

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦