在混音应用程序中导入 tailwindcss 时 Shadcn/ui 无法构建

Question

遵循此处的文档：https://ui.shadcn.com/docs/installation/remix#6 我遇到以下异常：

app/root.tsx (11:7): "default" is not exported by "app/tailwind.css", imported by "app/root.tsx".
file: /Users/USERNAME/Documents/Projects/starwars/app/root.tsx:11:7

 9: import type { LinksFunction } from "@remix-run/node";
10: 
11: import styles from "./tailwind.css"
           ^
12: 
13: export const links: LinksFunction = () => [

文档明确指出我们需要导入它，而不是在导入 tailwind.css 文件时保留混音字符串引用。

此错误不会停止开发，但会停止 javascript 运行，仅强制服务器端生成。我也无法运行

npm run build

，因为这会导致编译过程失败。

请随意在此处查看我的示例项目是否存在此问题：https://github.com/ntregillus/starwars

Answer 1

使用新的 Vite 编译器，现在有两种导入样式表的方法。

如果您使用

links

导出，则需要通过将

?url

附加到文件名来导入文件：

import styles from "./tailwind.css?url"

styles

是CSS文件的路径。

另一种更惯用的 Vite 方式是简单地使用 side-effect 导入。

import "./tailwind.css"

注意没有变量。 Vite 将在开发过程中内联样式，并为生产版本添加

<link href>

。

请参阅https://remix.run/docs/en/main/guides/css-files了解更多信息