我正在構建一個庫組件，它將被加載到一個不同的項目中。當我將組件加載到另一個項目中時，沒有應用任何樣式。

組件庫使用vue 3，vite，scss & amp打字稿。 對于組件，我有一個單獨的scss文件，我將它導入到組件的樣式標簽中，它是lang = & quotscss & quot。

這是我為構建庫而運行的vite.config:

export default defineConfig({
  plugins: [
    vue()
  ],
  base: '',
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'ComponentLibrary',
      fileName: (format) => `component-library.${format}.js`,
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue"
        }
      }
    },

    outDir: './vue-component-dist'
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

在“src/index.ts”中，我這樣注冊組件:

export {default as MyComponent} from "@/MyComponent.vue"

當我運行vite config來構建庫時，它將所有的SCS編譯成一個css文件。 然后，我使用npm pack打包dist文件夾，在package.json中有以下內容:

"type": "module",
  "main": "./vue-component-dist/component-library.umd.js",
  "module": "./vue-component-dist/component-library.es.js",
  "files": [
    "vue-component-dist"
  ],
  "exports": {
    ".": {
      "import": "./vue-component-dist/component-library.es.js",
      "require": "./vue-component-dist/component-library.umd.cjs"
    },
    "./style.css": "./vue-component-dist/style.css"
  },

(注意這并不是package.json的全部，其他的都無關緊要)。

之后，我用npm將tarball導入到我的另一個項目中，并將組件導入到vue中:

<script>
import {MyComponent} from '@ComponentLibrary/component-library'
export default {
  components: {
    MyComponent
  }
}
</script>

使用該組件可以很好地工作，但是它沒有任何樣式。看起來我構建這個庫是錯誤的，所以它沒有使用用它構建的樣式。我可以從包中導入style.css，但我不想這樣做。

為什么組件不使用它構建時的樣式？

提前感謝。