michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore(lint): Prettier fix

Browse source
This commit is contained in:
github-actions[bot] 2021-12-15 14:54:42 +00:00
parent ce784126e1
commit 4d479a964c
3 changed files with 24 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
docs/src/pages/de/guides/styling.md
View file

@ -10,7 +10,6 @@ Astro verfügt über eine besondere Möglichkeit, um das Schreiben von CSS so ei
Standardmäßig werden in Astro-Komponenten alle Styles nur auf Elemente im Rahmen der Komponente (genannt **Scope**) angewandt, der sie hinzugefügt wurden. Dies kann die Arbeit mit Styles erheblich erleichtern, da du dich zu jeder Zeit nur um die Gestaltung der Komponente kümmern musst, an der du arbeitest.
```html
<!-- src/components/MeineKomponente.astro -->
<style>
@ -25,7 +24,9 @@ Standardmäßig werden in Astro-Komponenten alle Styles nur auf Elemente im Rahm
</style>
<h1>Ich bin ein Style im Scope der Komponente, und ich bin rot!</h1>
<p class="text">Ich bin ein Style im Scope der Komponente, und ich bin kursiv!!</p>
<p class="text">
Ich bin ein Style im Scope der Komponente, und ich bin kursiv!!
</p>
```
Beachte dass der der `h1`-Selektor hier nicht über die Komponente hinaus wirksam wird! Die Styles werden nicht auf andere `h1`-Tags außerhalb dieses Dokuments angewandt - auch nicht in untergeordneten Komponenten.
@ -149,13 +150,12 @@ Du kannst jedes beliebige PostCSS-Plugin verwenden, indem du eine `postcss.confi
Styling in Astro sollte so flexibel sein, wie du es haben willst! Die folgenden Optionen werden unterstützt:
| Framework | Globales CSS | Scoped CSS | CSS-Modules |
| :--------------- | :----------: | :--------: | :----------: |
| :--------------- | :----------: | :--------: | :---------: |
| `.astro` | ✅ | ✅ | N/A¹ |
| `.jsx` \| `.tsx` | ✅ | ❌ | ✅ |
| `.vue` | ✅ | ✅ | ✅ |
| `.svelte` | ✅ | ✅ | ❌ |
¹ _`.astro`-Dateien haben keine Laufzeit, daher nimmt Scoped-CSS hier den Platz von CSS-Modules ein (Styles sind im Scope der Komponenten, benötigen aber keine dynamischen Werte)_
Alle Styles in Astro werden automatisch minifiziert und gepackt, du kannst so einfach nur dein CSS schreiben - und wir machen den Rest ✨.
@ -276,7 +276,7 @@ Sämtliches CSS wird minifiziert und automatisch gebündelt, wenn du `astro buil
Wir werden unsere Styling-Optimierungen im Laufe der Zeit stetig weiterentwickeln und würden gerne euer Feedback dazu hören! Falls `astro build` unerwartete Styles generiert, oder wenn du Vorschläge zur Verbesserung hast, [eröffne bitte ein Issue][issues].
_Beachte: Wenn einige Seiten-Styles gemeinsam gebündelt werden und andere Seiten-Styles auf die Seite bezogen bleiben, entwickeln sich hieraus meistens keine Probleme. Aber wenn Teile deiner Styles gebündelt werden, könnten sie _technisch_ auch in einer anderen Reihenfolge laden, als von dir in deiner Kaskade intendiert. Auch wenn dieses Problem nicht nur Astro zu eigen ist - es besteht potentiell bei so ziemlich jedem Bündelungsprozess - so kann es dich doch unerwartet treffen, wenn du diese Möglichkeit nicht von vorne herein in Betracht ziehst. Stelle sicher, dass du deinen abschließenden Build eingehend diesbezüglich inspizierst - und [melde bitte auftretende Probleme][issues], auf die du stößt._
_Beachte: Wenn einige Seiten-Styles gemeinsam gebündelt werden und andere Seiten-Styles auf die Seite bezogen bleiben, entwickeln sich hieraus meistens keine Probleme. Aber wenn Teile deiner Styles gebündelt werden, könnten sie \_technisch_ auch in einer anderen Reihenfolge laden, als von dir in deiner Kaskade intendiert. Auch wenn dieses Problem nicht nur Astro zu eigen ist - es besteht potentiell bei so ziemlich jedem Bündelungsprozess - so kann es dich doch unerwartet treffen, wenn du diese Möglichkeit nicht von vorne herein in Betracht ziehst. Stelle sicher, dass du deinen abschließenden Build eingehend diesbezüglich inspizierst - und [melde bitte auftretende Probleme][issues], auf die du stößt.\_
## Fortgeschrittene Styling-Architektur
@ -389,10 +389,7 @@ In Astro empfehlen wir folgendes Setup hierfür:
```html
<head>
<link
rel="stylesheet"
href={Astro.resolve("../styles/global.css")}
>
<link rel="stylesheet" href={Astro.resolve("../styles/global.css")} >
</head>
```

8
docs/src/pages/guides/aliases.md
View file

@ -26,12 +26,8 @@ You can add import aliases from either `tsconfig.json` or `jsconfig.json`.
"compilerOptions": {
"baseUrl": ".",
"paths": {
"asset:*": [
"src/assets/*?url"
],
"component:*": [
"src/components/*.astro"
]
"asset:*": ["src/assets/*?url"],
"component:*": ["src/components/*.astro"]
}
}
}