gpt4 book ai didi

vue.js - 编译的 Tailwind CSS 不包括自定义导入的文件

转载 作者:行者123 更新时间:2023-12-03 20:50:35 24 4
gpt4 key购买 nike

我在使用 npx 编译 TailwindCSS 时遇到了一些问题,如文档中所述。 Webpack 正在做他的工作!开发服务器和构建 dist 都可以正确使用自定义类!问题是当我通过 npx tailwindcss build tail.css -o tailwind.full.css 编译 tailwindcss 时.自定义导入不包含在结果 css 文件中。所以,自动完成没有完成我的自定义 css 键......一切正常,除了 npm tailwindcss build谁不编译我的@import[ed] 自定义 css 文件。我怎么能得到这个?
这是我在 npx tailwind build 命令中通知的 tail.css 文件:

@import "./colors.css";

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

@import "./custom.css";
如果我因某些错误而更改文件名(如 ./customnnnn.css),则不会报告任何错误:
我的控制台输出:
npx tailwindcss build src/assets/css/tail.css -o src/assets/css/tailwind/tailwind.full.css

tailwindcss 1.5.2

� Building... src/assets/css/tail.css

✅ Finished in 3.53 s
� Size: 1.9MB
� Saved to src/assets/css/tailwind/tailwind.full.css
但是如果我更改诸如“tailwindcss/utilitiesssssss”之类的内容,结果文件会更小,没有实用程序内容。所以,有人说我的自定义文件的路径映射在 npx tailwind build 实用程序中有些错误,但我尝试了所有方法,但没有成功,并且当使用正确的文件名称时,dev 和 prod 构建都可以正常工作,例如文档说明。因此,错误仅出现在 npx tailwind build 实用程序上!当未找到 @ 中列出的某些文件时,它至少可以显示一些警告import 声明,所以我们可以继续解决这个问题。
那么,我该如何解决这种行为呢?
提前致谢!
StackOverflow 太棒了!

最佳答案

@import需要提供绝对目录。它不会通过 npx tailwindcss 编译并忽略它,因为它是基本的 css 规则。所以每次使用@import 'some file'使用tailwindcss,使用绝对路径。 @import ../custom.css在你的情况下。所以浏览器可以加载它。另请注意 @import不推荐,因为它会减慢 Web 渲染速度。
现代顺风使用 @tailwind导入基础,实用程序等。所以总是避免@import。

关于vue.js - 编译的 Tailwind CSS 不包括自定义导入的文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63121716/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com