typescript - Hur importerar jag ett externt CSS-stilmall i fresh + preact?

Jag försökte använda en extern CSS-fil i min JSX-kod som det beskrevs här efter att inte ha hittat någon dokumentation om hur man gör detta med preact.

Detta resulterade bara i detta fel.

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/[email /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...a

Tile.tsx:

import "./someCssStylesheet.css";

export default function Tile() {
  return (
    <div class="tile">
    </div>
  );
}

someCssStylesheet.css

.tile {
    background-color: #1e1e2e;
    height: "500px";
    width: "500px";
}

Svar #1

Jag är inte säker på hur man specifikt importerar ett stylesheet som du försöker dock, om ditt mål bara är att använda ett externt stylesheet med deno + freshjs, kan du göra det genom att använda <Head>-komponenten för att ändra dokumentets head och lägga till en <link rel="stylesheet" href="someCssStylesheet.css" />.

Till exempel, i en helt ny katalog skapad med deno run -A -r https://fresh.deno.dev my-project, låt oss säga att jag vill att räknarkomponenten ska ha en bakgrundsfärg med hjälp av ett externt stylesheet, gör följande:

  1. lägg till en fil someCssStylesheet.css i /static-mappen
  2. välj en rutt/sida som du vill att stilen ska tillämpas på t.ex. index.tsx och öppna den
  3. Observera import { Head } from "$fresh/runtime.ts"; högst upp i filen. Den här komponenten ger dig tillgång till dokumentets <head>...</head>. Här lägger du till en rad som link rel="stylesheet" href="/someCssStylesheet.css" /> inom <Head>...</Head>-komponenten.
  4. Lägg till några stilar i arket som:
.some-class {
  background-color: aquamarine;
}
  1. I Counter.tsx, lägg till klassen i den omgivande div:en.
return (
  <div class="flex gap-2 w-full some-class">
    ...
  </div>
);
  1. Starta upp det och kolla - deno task start

Här är en diskussion på GitHub från det nya projektet under denoland som innehåller mycket av ovanstående information - länk.

Svar #2

Jag kan vara lite sen med detta, men jag arbetade på att skapa en Fresh-app och stötte på problemet att jag ville importera ett stylesheet som bara var relevant för en komponent. Det finns ingen bra lösning på detta, men jag skapade ett plugin som låter dig definiera CSS per komponent och tillämpa det genom att lägga till ett inject-style-attribut på elementet/komponenten. Den extra fördelen med detta plugin är att det endast skickar de stilar du anger när det renderas på servern, så du behöver inte skicka ALLA dina anpassade stilar vid varje sidrendering.

Du kan kolla in pluginet här

Så, i ditt exempel skulle implementeringen se ut ungefär så här med pluginet installerat/konfigurerat:

// components/Tile.tsx
export default function Tile() {
  return (
    <div class="tile" inject-style="styles/tile.css">
    </div>
  );
}

/* static/styles/tile.css */
.tile {
    background-color: #1e1e2e;
    height: "500px";
    width: "500px";
}

Förhoppningsvis hjälper detta någon annan som råkar stöta på detta problem!

Observera: detta tillvägagångssätt isolerar inte stilar på samma sätt som CSS-moduler gör, de läggs fortfarande till globalt, så du bör vara uppmärksam på hur du avgränsar din CSS.

Relaterade artiklar