vite 构建样式必须单独导入答案

【问题标题】：vite build styles have to be imported separatelyvite 构建样式必须单独导入
【发布时间】：2022-06-10 18:02:09
【问题描述】：

我有一个 vue3+vite 包，我想将它发布到 npm，但是当我将它导入到测试项目时，我必须从 dist 文件夹中单独导入样式，但我希望将我的样式作为我的包导入如下所示的寄存器

我现在如何导入：

import myComp from 'foo'
app.use(myComp)
import 'foo/dist/style.css'

我想要什么：

import myComp from 'foo'
app.use(myComp)
// and styles work out of the box

install.ts（入口）：

// @ts-ignore
import componentRegisterer from './plugins/components.ts'
// @ts-ignore
import mixins from './plugins/mixins.ts'

export default {
  install: (app: any, options: any): void => {
    app.mixin(mixins)
    componentRegisterer(app)
  }
}

vite.config.js:

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

// https://vitejs.dev/config/
const path = require("path")
export default defineConfig({
  test: {
    setupFiles: ['./tests/config.ts']
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/install.ts'),
      name: 'vcp',
      fileName: (format) => `vcp.${format}.ts`
    },
    rollupOptions: {
      external: ['vue', 'vueI18n'],
      output: {
        exports: 'named',
        globals: {
          vue: 'Vue',
          vcp: 'Vcp'
        }
      }
    },
  },
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname, 'src/assets/translations.ts'),
      globalSFCScope: true,
      compositionOnly: false,
    }),
  ],
  server: {
    port: 8080
  },
  resolve: {
    dedupe: ['vue'],
    alias: {
      "~": path.resolve(__dirname, "./src"),
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

package.json:

{
  "name": "vcp",
  "version": "0.9.11",
  "private": false,
  "author": "Alireza Safari <alireza.safaree@gmail.com> (http://alireza-safari.ir)",
  "license": "MIT",
  "main": "./dist/vcp.umd.ts",
  "description": "Vue Client Print with Template Builder",
  "exports": {
    ".": {
      "require": "./dist/vcp.umd.ts"
    },
    "./dist/style.css": "./dist/style.css"
  },
  "keywords": [
    "vcp",
    "vue print",
    "vue client print",
    "template builder",
    "vue report",
    "vue report generator"
  ],
  "files": [
    "dist/*"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/alireza0sfr/vue-client-print"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest run --environment jsdom",
    "test:ui:": "vitest --environment jsdom --ui",
    "test:coverage": "vitest run --coverage --environment jsdom",
    "test:watch": "vitest --environment jsdom"
  },
  "dependencies": {
    "dom-to-image": "^2.6.0",
    "file-saver": "^2.0.5",
    "jsdom": "^19.0.0",
    "print-js": "^1.6.0",
    "register-service-worker": "^1.7.2",
    "typescript": "^4.7.2",
    "vitest": "^0.12.9",
    "vue": "^3.2.36",
    "vue-i18n": "^9.1.10"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^3.4.0",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vitest/ui": "^0.12.9",
    "@vue/compiler-sfc": "^3.2.36",
    "@vue/test-utils": "^2.0.0-rc.18",
    "c8": "^7.11.3",
    "cz-conventional-changelog": "^3.0.1",
    "vite": "^2.9.9"
  }
}

【问题讨论】：

标签： vue.js vite

【解决方案1】：

对于es.js，可以使用vite-plugin-libcss自动导入css文件；
对于 umd.js，您可以将build.cssCodeSplit 设置为true 以生成内联样式。

参考：https://github.com/vitejs/vite/issues/1579

【讨论】：