Vite“汇总未能解决”构建错误

Question

尝试构建一个简单的 Vite 项目，其中包含 tailwindcss 并收到以下错误，有什么想法吗？

> vite-project@0.0.0 build
> vite build

vite v2.3.4 building for production...
? 1 modules transformed.
[vite]: Rollup failed to resolve import "style.css" from "index.html".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "style.css" from "index.html".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (/Users/jmansfield/Sites/vite-project/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:45022:19)
    at Object.onwarn (/Users/jmansfield/Sites/vite-project/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:44812:13)
    at Object.onwarn (/Users/jmansfield/Sites/vite-project/node_modules/rollup/dist/shared/rollup.js:20122:20)
    at ModuleLoader.handleResolveId (/Users/jmansfield/Sites/vite-project/node_modules/rollup/dist/shared/rollup.js:19143:26)
    at /Users/jmansfield/Sites/vite-project/node_modules/rollup/dist/shared/rollup.js:19097:22
    at async Promise.all (index 0)
    at async ModuleLoader.fetchStaticDependencies (/Users/jmansfield/Sites/vite-project/node_modules/rollup/dist/shared/rollup.js:19095:34)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (/Users/jmansfield/Sites/vite-project/node_modules/rollup/dist/shared/rollup.js:19071:9)
    at async Promise.all (index 0)```

Answer 1

这是因为安装build.rollupOptions.external程序会先vite:rollup查找/外部文件。因此，当您将 css 文件添加到 html 时，只需添加 '/' （例如，/src/foo.css而不是src/foo.css）

Answer 2

就我而言 - 所有“@”路径都没有得到解析，因此我们在 vite.config.ts 文件中添加了一个路径解析器

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import InjectCSS from '@itsy/vite-css-inject';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    InjectCSS(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@tests": path.resolve(__dirname, "./tests")
    }
  }
})

希望有帮助！

Answer 3

基本上vite找不到你在html中引用的css文件。一旦我遇到这个问题，我就改变了在 html 中引用 css 文件的方式。我./在路径中添加或删除。

Answer 4

我刚刚遇到了这个问题，这是由文件名中的拼写错误引起的。

在 MacOS 上，文件名不区分大小写，但在 Linux 上则区分大小写，因此，如果您的映像资产在本地工作但在部署时中断，请检查文件名大小写。

我的src="/logos/Logo_horizontal.svg"不是src="/logos/Logo_Horizontal.svg".

Vite 文档确认用于/logos：/public/logoshttps ://vitejs.dev/guide/assets.html#the-public-directory