我试图在我的JSX代码中使用一个外部CSS文件，就像它是详细的here，因为没有找到任何关于如何使用preact这样做的文档。
这只会导致这个错误。
Warning deno task is unstable and may drastically change in the future
Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 1 routes and 1 islands.
error: Uncaught (in promise) TypeError: Expected a JavaScript or TypeScript module, but identified a Unknown module. Importing these types of modules is currently not supported.
Specifier: file:///home/nici/Documents/deno/tiles/islands/someCssStylesheet.css
at file:///home/nici/Documents/deno/tiles/islands/Tile.tsx:1:8
await import(entrypoint);
^
at async dev (https://deno.land/x/fresh@1.1.2/src/dev/mod.ts:187:3)
at async file:///home/nici/Documents/deno/tiles/dev.ts:5:1
Watcher Process finished. Restarting on file change...aTile.tsx:
import "./someCssStylesheet.css";
export default function Tile() {
return (
<div class="tile">
</div>
);
}someCssStylesheet.css
.tile {
background-color: #1e1e2e;
height: "500px";
width: "500px";
}
2条答案
按热度按时间thtygnil1#
我不知道如何像你试图的那样专门导入一个样式表 * 但是 *，如果你的目标只是使用一个外部样式表与deno + freshjs，你可以通过利用
<Head>组件来修改文档的头部并添加一个<link rel="stylesheet" href="someCssStylesheet.css" />。例如，在一个用
deno run -A -r https://fresh.deno.dev my-project创建的全新目录中，假设我希望counter组件使用外部样式表具有背景颜色，请执行以下操作：1.将文件
someCssStylesheet.css添加到/static文件夹1.选择一个你想要样式表应用到的路径/页面，即
index.tsx并打开它1.请注意文件顶部的
import { Head } from "$fresh/runtime.ts";。此组件允许您访问文档的<head>...</head>。在这里，您可以在<Head>...</Head>组件中添加一行，如link rel="stylesheet" href="/someCssStylesheet.css" />。1.在工作表中添加一些样式，如：
1.在
Counter.tsx中，将类添加到周围的div中。deno task start下面是github上的一个讨论，来自denoland下的fresh项目，包含了很多上面的信息-link。
ttygqcqt2#
我可能有点晚了，但我正在创建一个Fresh应用程序，遇到了想要导入一个只与组件相关的样式表的问题。没有一个很好的解决方案，但我确实创建了一个插件，允许您定义每个组件的CSS，并通过向元素/组件添加
inject-style属性来应用它。这个插件的另一个好处是，它只会在服务器上渲染时发布你告诉它的样式，所以你不必在每个页面渲染时发布所有的自定义样式。您可以查看插件here
因此，在您的示例中，安装/配置插件后的实现将如下所示：
希望这能帮助其他任何人在这个问题上绊倒！
注意：这种方法并不像CSS模块那样隔离样式，它们仍然是全局添加的，因此您应该注意如何定义CSS的范围。