Next.js: Bevorzugte Methode zur Verwendung von normalize.css?
Was ist der ideale Weg, um normalize.css (idealerweise von NPM) performant zu laden? Ich möchte es vermeiden, es als statisches Asset zu laden, und eine Header-Anforderung nur fĂŒr ein kleines bisschen CSS einfĂŒhren.
Glamour hat ein glamor/reset Extra, aber es ist viel einfacher als normalisieren und nicht das, wonach ich suche (ich bin mir sowieso nicht sicher, wie ich Extras von next in Glamour laden soll).
drwpow
Alle 27 Kommentare
Sie können next/head verwenden.
nkzawa
am 9. Dez. 2016
@nkzawa Ich habe next/head verwendet, um einige globale Stile zu laden, aber ohne css-loader im Projekt, wie könnte ich eine CSS-Datei von node_modules anfordern? Und kann dies auf der Benutzerseite zwischengespeichert werden oder wird die Nutzlast bei jeder Header-Anforderung aufgeblÀht?
drwpow
am 9. Dez. 2016
Sie möchten style als Text in next/head definieren wie:
<Head>
<style>{`
body {
margin: 0;
}
`}</style>
</Head>
Sie mĂŒssten normalize.css in .json oder eine Komponente in require umwandeln, aber das wĂ€re momentan der beste Weg, meiner Meinung nach. Wenn Sie die Datei auf allen Seiten benötigen, wird sie als Block gebĂŒndelt und nur einmal geladen, damit die Nutzlast nicht aufgeblĂ€ht wird.
Sie könnten auch css-loader verwenden, wenn https://github.com/zeit/next.js/pull/222 veröffentlicht wurde.
nkzawa
am 9. Dez. 2016
Danke. Das habe ich mir gedacht, wusste aber nicht, ob es derzeit eine automatischere Möglichkeit gibt, es zu laden. Ich denke, ich könnte Webpack oder Gulp lokal ausfĂŒhren, um es zu konvertieren, bevor es das nĂ€chste Mal erscheint.
Und es ist gut zu wissen, dass next das gemeinsame Chunking verwendet. Ich fĂŒhle mich jetzt besser dabei, Sachen in den Kopf zu schieben. Danke fĂŒr die Beantwortung meiner Fragen!
Am 9. Dezember 2016 um 01:11 schrieb Naoyuki Kanezawa [email protected] :
Sie möchten den Stil als Text in next/head definieren wie:
Sie mĂŒssten normalize.css in .json oder eine erforderliche Komponente konvertieren, aber dies wĂ€re derzeit meiner Meinung nach der beste Weg. Wenn Sie die Datei auf allen Seiten benötigen, wird sie als Block gebĂŒndelt und nur einmal geladen, damit die Nutzlast nicht aufgeblĂ€ht wird.Sie könnten auch den CSS-Loader verwenden, wenn #222 veröffentlicht wurde.
â
Sie erhalten dies, weil Sie den Thread verfasst haben.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub an oder schalten Sie den Thread stumm.
drwpow
am 9. Dez. 2016
Ich möchte darauf hinweisen, dass Glamour tatsÀchlich normalize.css verwendet, wenn auch eine veraltete Version v3.0.2
https://github.com/threepointone/glamour/blob/master/src/reset.js
Pull-Request gemacht
https://github.com/threepointone/glamour/pull/154
Das einfache Importieren import 'glamor/reset' funktioniert einwandfrei.
FĂŒhlen Sie sich frei, meinen Fork zu verwenden, wenn Sie 5.0 benötigen, oder warten Sie, bis die Pull-Anforderung zusammengefĂŒhrt wird :)
FrancosLab
am 13. Dez. 2016
@FrancosLab Danke fĂŒr den Tipp! Ich bin auf glamor/reset , habe aber nicht bemerkt, dass Normalisieren ein Teil davon war â ich glaube nicht, dass es in der README-Datei von Glamour erwĂ€hnt wurde. Danke fĂŒr die PR!
drwpow
am 13. Dez. 2016
Was ist also der beste Weg, dies jetzt fĂŒr [email protected] zu tun? Ich habe mehrere Stunden damit verbracht, nachzuahmen, was mit dem with-global-stylesheet -Beispiel gemacht wurde, ohne Erfolg.
Da es sich normalize.css um ein Paket handelt, reicht es nicht aus, die Datei einfach zu kopieren (die Anforderungsauflösung des Knotens verwendet package.main ). AuĂerdem scheint sich emit-file-loader (und auch file-loader ) anders zu verhalten als das Beispiel-Repo. Es scheint, dass beim Ăbergeben der Optionen name=dist/[path][name].[ext] an den Loader path immer mit - beginnt, was dazu fĂŒhrt, dass sich die Datei in .next/dist/-/node_modules/normalize.css/normalize.css befindet, was ein Problem darstellt .
Der Weg, dies zu umgehen, besteht darin, im Grunde die gesamte normalize.css -Datei in den static -Ordner zu kopieren oder vielleicht das Ganze in ein style -Tag einzubetten (ich verwende gestylte Komponenten aber zum Stylen).
Ich habe versucht, webpack-copy-plugin zu verwenden, aber es sieht so aus, als ob der Ordner static nicht von .next bereitgestellt wird, sondern tatsÀchlich vom Stammordner selbst <root-folder>/static (wobei pages lebt), also hat das auch nicht funktioniert.
Jetzt, da Next.js nicht auf Glamour angewiesen ist, irgendwelche Tipps, wie man damit vorankommt?
BEARBEITEN: Verwandte: https://github.com/zeit/styled-jsx/issues/83 , https://github.com/zeit/styled-jsx/pull/100 , https://github.com/zeit/ next.js/issues/544
migueloller
am 23. Feb. 2017
Das with-global-stylesheet Beispiel wurde gerade hier aktualisiert: #1327!
migueloller
am 2. MĂ€rz 2017
1327 funktioniert immer noch nicht fĂŒr etwas so Einfaches wie import 'normalize.css' . Das Hauptproblem scheint zu sein, dass Sie keine Nicht-js-Dateien in eine Datei importieren können, die auf dem Server ausgefĂŒhrt wird, da Webpack nicht auf dem Server ausgefĂŒhrt wird.
migueloller
am 2. MĂ€rz 2017
@migueloller könnte vielleicht nach v2.0 auf universelles Webpack umsteigen...: https://github.com/zeit/next.js/issues/1245
sedubois
am 2. MĂ€rz 2017
@sedubois , warte sehnsĂŒchtig darauf! đ
migueloller
am 2. MĂ€rz 2017
dort kannst du deine Stimme abgeben đ
sedubois
am 2. MĂ€rz 2017
Leute, ich habe normalize problemlos ĂŒber sass-loader importiert, auch ohne die includePaths , die gerade zusammengefĂŒhrt wurden. Alles, was Sie tun mĂŒssen, ist, normalize-scss (die Sass-Portierung von normalize.css ) zu installieren und <strong i="10">@import</strong> '~normalize-scss'; auf Ihrer höchsten Ebene (benutzerdefiniertes _document , Layout oder Seite) hinzuzufĂŒgen, wo Sie wĂŒrde ein scss Stylesheet enthalten, wie es with-global-stylesheet tut.
Wenn Sie jetzt lieber das Original importieren, könnten Sie mit babel-plugin-module-resolver einen Alias ââfĂŒr node_modules einrichten, wie ich es gerade mit styles im Beispiel getan habe, und ihn dann mit js importieren + <style dangerouslySetInnerHTML={{ __html: normalize }} /> .
orlin
am 2. MĂ€rz 2017
@orlin , Sie können es nicht einfach mit JS importieren, da es einen Fehler auf dem Server auslöst, da es Webpack nicht durchlÀuft.
migueloller
am 2. MĂ€rz 2017
@migueloller , es sollte gut funktionieren, genauso wie scss $ im Beispiel with-global-stylesteet aus js importiert wird. Sowohl css als auch scss werden von Webpack-Loadern in next.config.js gehandhabt und in js konvertiert. Ich habe nur import normalize from '...' nicht angegeben, da ich normalize.css installieren und einen babel-plugin-module-resolver -Alias ââeinrichten mĂŒsste, um Ihnen einen funktionierenden ... -Pfad zu geben.
orlin
am 2. MĂ€rz 2017
@Orlin ,
Ich habe das Beispiel geklont, normalize.css hinzugefĂŒgt und ein bisschen damit gespielt. Du hast Recht, es ist möglich, dass es funktioniert!
Ich musste jedoch eine benutzerdefinierte Konfiguration dafĂŒr erstellen, bei der der Ausgabename der ausgegebenen Datei dist/[path]index.js war, da, wenn Sie package.json nicht kopieren, dann require von Node verwendet wird node_modules ), mĂŒssen Sie eine Webpack-Regel nur fĂŒr normalize.css (und andere Pakete, die Sie möglicherweise verwenden) einrichten.
Dies funktioniert als kurzfristige Lösung, aber es wÀre definitiv schön, etwas zu haben, das sofort einsatzbereit ist, wie es in #1245 und https://github.com/zeit/styled-jsx/pull/100#issuecomment diskutiert wird -277133969
@rauchg , denkst du, es wĂ€re eine gute Idee, ein Beispiel fĂŒr Pakete zu machen, die in node_modules existieren? Ich hĂ€tte nichts dagegen, ein neues Beispiel zu machen oder das with-global-stylesheet zu erweitern.
migueloller
am 2. MĂ€rz 2017
@migueloller wĂ€re es wahrscheinlich vorzuziehen, es dem gleichen Beispiel hinzuzufĂŒgen
rauchg
am 2. MĂ€rz 2017
@migueloller Ich habe einen super-sauberen "Best-Practices"-Weg gefunden, um dies zu tun. Werde eine PR zu with-global-stylesheet machen ... Ich hoffe, Sie haben nicht zu viel Zeit damit verbracht, es zu hacken.
orlin
am 3. MĂ€rz 2017
Globale Stile, einschlieĂlich ZurĂŒcksetzen oder Normalisieren, sind sowieso ein Anti-Pattern. Komponenten sollten ihre eigenen Stile steuern. Normalize ist die jQuery von CSS.
jaydenseric
am 9. MĂ€rz 2017
@jaydenseric Sie haben Recht, dass Normalize.css die jQuery von CSS ist. Browser sind immer noch ziemlich uneinheitlich in ihrer Standardgestaltung von HTML-Elementen, Normalize.css hilft bei der Lösung dieses Problems. Normalize.css ist eine Notwendigkeit fĂŒr die UnterstĂŒtzung Ă€lterer Browser fĂŒr moderne Projekte.
btnwtn
am 9. Apr. 2017
Hier ist der Ansatz, den ich verwende: (https://github.com/zeit/next.js/#custom-document)
// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'
import flush from 'styled-jsx/server'
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
const { html, head, errorHtml, chunks } = renderPage()
const styles = flush()
return { html, head, errorHtml, chunks, styles }
}
render() {
return (
<html>
<Head>
<title>My page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />
</Head>
<body className="custom_class">
{this.props.customValue}
<Main />
<NextScript />
</body>
</html>
)
}
}
vinzcelavi
am 1. MĂ€rz 2018
@vinzcelavi Warum spĂŒlen Sie die Stile?
sospedra
am 12. Nov. 2018
@sospedra Ich habe keine Ahnung đŹ Vielleicht könnte es helfen : https://github.com/zeit/styled-jsx#styled -jsxserver
vinzcelavi
am 13. Nov. 2018
Sie möchten das wahrscheinlich nicht tun, sondern rufen stattdessen Document.getInitialProps gemÀà der aktualisierten Dokumentation auf: https://github.com/zeit/next.js/#custom -document
timneutkens
am 13. Nov. 2018
Warum ist es nicht in Ordnung, ein link -Tag mit der CDN-URL innerhalb von Head zu platzieren? Es hat fĂŒr mich funktioniert.
janoist1
am 4. Dez. 2018
@ janoist1 Ich denke, das Problem hier ist, dass wir uns als nÀchstes normalisieren möchten, anstatt uns auf ein externes CDN zu verlassen. In der Entwicklung ist es in Ordnung, aber in der Produktion möchte ich mich nicht auf irgendetwas Externes verlassen.
IAmNatch
am 8. MĂ€rz 2019
Hier sind zwei Möglichkeiten, dies zu lösen, wenn die Verwendung next-css keine Option fĂŒr Sie ist (vielleicht verwenden Sie CSS-Module, sodass das Importieren einer CSS-Datei aus _app nicht global gilt).
Wir fĂŒgen zuerst link in Head fĂŒr normalize.css ein und wenden dann einige benutzerdefinierte globale Stile ĂŒber <style type='text/css'>{globalStyles}</style> an
import React from 'react'
import Document, { Head, Main, NextScript } from 'next/document'
const globalStyles = `
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
`
export default class MyDocument extends Document {
render () {
return (
<html>
<Head>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<meta charSet='utf-8' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css' />
<style type='text/css'>{globalStyles}</style>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
transitive-bullshit
am 10. MĂ€rz 2019
Verwandte Themen
timneutkens
·
3Kommentare
YarivGilad
·
3Kommentare
olifante
·
3Kommentare
wagerfield
·
3Kommentare
kenji4569
·
3Kommentare
Hilfreichster Kommentar
@jaydenseric Sie haben Recht, dass Normalize.css die jQuery von CSS ist. Browser sind immer noch ziemlich uneinheitlich in ihrer Standardgestaltung von HTML-Elementen, Normalize.css hilft bei der Lösung dieses Problems. Normalize.css ist eine Notwendigkeit fĂŒr die UnterstĂŒtzung Ă€lterer Browser fĂŒr moderne Projekte.