element-plus [Build] [All] Nuxt 3, Auto Import Components

Bug Type: Build

Environment

Vue Version: 3.2.37
Element Plus Version: 2.2.15
Browser / OS: Chrome 104
Build Tool: Vite

Reproduction

Related Component

All

Reproduction Link

CodeSandbox

Steps to reproduce

I want to import element components into Nuxt 3. I do not want to load one big index.css file as it is done in the element-plus-nuxt-starter. But add single, isolated components. I updated the vite configuration in nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineNuxtConfig({
  vite: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
})

Loading any component...

<script setup>
  const input = ref("");
</script>

<template>
  <el-input v-model="input" placeholder="Please input" />
</template>

... breaks, because of .css

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /(...)/node_modules/element-plus/theme-chalk/el-input.css
    at new NodeError (internal/errors.js:322:7)
    at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:71:15)
    at Loader.getFormat (internal/modules/esm/loader.js:105:42)
    at Loader.getModuleJob (internal/modules/esm/loader.js:243:31)
    at async ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:78:21)
    at async Promise.all (index 1)
    at async link (internal/modules/esm/module_job.js:83:9) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'