Next.js: CSS in ein nächstes Projekt einbeziehen?

Erstellt am 27. Nov. 2016  ·  31Kommentare  ·  Quelle: vercel/next.js

Ich weiß, dass Next Glamour und css-in-js verwendet. Aber gibt es eine Möglichkeit, echtes css/less/scss in einem Next-Projekt zu verwenden ... irgendwie? Zumindest für das Bootstrapping eines Projekts?

Meine Argumentation ist folgende: Für einfache Sites, wie die, auf die Next abzielt, werden die meisten vorgefertigten HTML-Designs, die online gekauft werden können, mit reinem HTML und CSS erstellt. Alles, was Sie tun müssen, ist, den HTML-Code in Reaktionskomponenten zu zerlegen, sie in die entsprechenden Seitenordner zu legen, und Sie sind fertig.

Ich würde Next wirklich gerne für mein Projekt verwenden, aber wenn ich nicht in der Lage wäre, fertiges CSS irgendwie zu nutzen, wäre es ein Deal Breaker für mich. Gibt es eine Lösung oder einen Workaround für diesen Anwendungsfall?

picture manolkalinov

Hilfreichster Kommentar

  • Erstellen Sie einen /static -Ordner auf derselben Ebene wie der /pages -Ordner.
  • Legen Sie in diesem Ordner Ihre .css Dateien ab
  • Importieren Sie in Ihren Seitenkomponenten Head und fügen Sie <link /> zu Ihrem CSS hinzu.
import React from 'react';
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <title>My styled page</title>
      <link href="/static/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Hello world!
    </p>
  </div>
)

Auf diese Weise sollte Next.js das Link-Tag im Kopf der Seite rendern, und der Browser lädt das CSS herunter und wendet es an.

picture sergiodxa am 27. Nov. 2016
👍79 👎17 🎉7 ❤2 🚀1

Alle 31 Kommentare

  • Erstellen Sie einen /static -Ordner auf derselben Ebene wie der /pages -Ordner.
  • Legen Sie in diesem Ordner Ihre .css Dateien ab
  • Importieren Sie in Ihren Seitenkomponenten Head und fügen Sie <link /> zu Ihrem CSS hinzu.
import React from 'react';
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <title>My styled page</title>
      <link href="/static/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Hello world!
    </p>
  </div>
)

Auf diese Weise sollte Next.js das Link-Tag im Kopf der Seite rendern, und der Browser lädt das CSS herunter und wendet es an.

sergiodxa picture sergiodxa am 27. Nov. 2016
👍79 👎17 🎉7 ❤2 🚀1

Wow, danke für die schnelle Antwort :). Es klappt! Es gibt nur einen Haken: Beim ersten Laden der Seite blitzt das nicht formatierte HTML auf, kurz bevor alles richtig gerendert wird. Ich bin mir nicht sicher, ob es sich um CSS- oder JS-Dateien handelt, die nach der Reaktion geladen wurden. Gäbe es hierfür einen Workaround?

Wie auch immer, ich bin absolut beeindruckt von der Arbeit, die ihr leistet, und nochmals vielen Dank für die schnelle Antwort!

manolkalinov picture manolkalinov am 28. Nov. 2016

Egal, ich habe die Header-Komponente mit den CSS- und JS-Links auch in die Indexseite importiert, und der Flash ist weg. Darüber hinaus entfernt das Ändern der Anker-Tags in Link-Komponenten alle übrig gebliebenen Sprünge. Der Nachteil ist, dass die Link-Komponente scheinbar alle HTML-Tags von ihren untergeordneten Elementen entfernt (z. B. span-Tags mit Symbolklassen), sodass nur Text übrig bleibt.

Ich weiß, dass dieser Anwendungsfall das Gegenteil von korrekt und optimiert ist, aber er ist wirklich nützlich für Fälle, in denen wir auf schnelle und schmutzige ... Hässlichkeit zurückgreifen müssen :)

Der Workflow zum Integrieren eines vorgefertigten HTML-Designs sieht also folgendermaßen aus:

  1. Erstellen Sie einen statischen Ordner und kopieren/verschieben Sie alle js/css/img-Dateien aus der Vorlage
  2. Erstellen Sie eine page.js-Datei mit einer Komponente
  3. Fügen Sie den HTML-Code der Komponente hinzu und ändern Sie ihn so, dass er mit der Reaktion übereinstimmt
    3.1. Fügen Sie das Head-Tag hinzu und fügen Sie darin alle CSS/JS-Dateien aus dem ursprünglichen HTML-Code ein
    3.2. Aktualisieren Sie den Pfad zu diesen Dateien, damit er mit dem neuen statischen Ordner übereinstimmt
    3.3. Kopieren Sie den HTML-Code und fügen Sie ihn unter dem Head-Tag ein
    3.4 Alle nicht geschlossenen HTML-Tags (einschließlich Link-, Input- und Img-Tags) schließen oder selbst schließen
    3.5. Suchen/Ersetzen Sie alle Instanzen von class=" durch className="
    3.6. Entfernen Sie alle HTML-Kommentare
manolkalinov picture manolkalinov am 28. Nov. 2016
👍9 🎉3 😄3

@manolkalinov können Sie bitte Ihren Code zur einfachen Referenz anhängen? Ich weiß, dass Sie den Workflow geschrieben haben, aber ein Beispielcode erleichtert das Nachvollziehen und Debuggen, wenn ein Problem auftritt.

ralphievolt picture ralphievolt am 29. Nov. 2016
👍1

Das Hinzufügen von CSS im Head-Tag funktioniert auf jeden Fall. Allerdings ist es irgendwie hacky und was ist, wenn wir etwas wie postcss oder sass verwenden wollen? Wie konvertiert man vorhandene CSS-Stile in ein glamouröses JSON-Objekt? Außerdem ist es für Designer sehr schwierig, die Seite mit glamor zu gestalten. Es muss einen besseren Weg geben, dies zu tun.
Übrigens, im Vergleich zu CSS-Modulen, was ist der Vorteil der Verwendung von glamor ?

dzcpy picture dzcpy am 30. Nov. 2016
👍6

@andyhu bitte lesen Sie https://github.com/zeit/next.js#faq über die Vorteile der Verwendung von glamor .
Über postcss oder sass würde das Anpassen der Webpack-Konfiguration es Ihnen ermöglichen, sie zu verwenden (https://github.com/zeit/next.js/pull/222), oder ich denke, Sie können es einfach kompilieren Sie diese Dateien in CSS, bevor Sie next ausführen.

nkzawa picture nkzawa am 1. Dez. 2016

Ich denke es ist gelöst. Fühlen Sie sich frei, wieder zu öffnen, wenn Sie das Problem weiterhin haben. Danke für deine Antwort @sergiodxa !

nkzawa picture nkzawa am 1. Dez. 2016

@nkzawa Ich verwende die Anpassung der Webpack-Konfiguration, damit ich weniger in meinem Projekt verwenden kann. Hier ist mein Code
next.config.js

/* eslint-disable */

export default {
    webpack: (webpackConfig) => {
        const newConfig = { ...webpackConfig };
        newConfig.module.preloaders.push({
            test: /\.less$/,
            loader:'style-loader!css-loader!less-loader'
        });
        return newConfig;
    },
    cdn: false
}

dann benötige ich die less-Datei import './index.less' , aber es tritt ein Fehler auf

You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:4)

Ich bin mir sicher, dass ich less , less-loader , css-loader , style-loader installiert habe. Können Sie mir einen Vorschlag machen, danke im Voraus.

kimown picture kimown am 5. Jan. 2017

Du solltest es versuchen

config.module.rules.push({
      test: /\.less$/,
      use: [
        'style-loader',
        { loader: 'css-loader', options: { importLoaders: 1 } },
        'less-loader'
      ]
    })
bkniffler picture bkniffler am 9. Jan. 2017

@kimown Ist es dir gelungen, die Less-Datei zu importieren? Wenn ja, würdest du gerne verraten, wie du es gemacht hast?

crodriguezvega picture crodriguezvega am 25. Juni 2017

@sergiodxa Wie kann ich CSS aus node_modules importieren?

saadbinsaeed picture saadbinsaeed am 19. Juli 2017
👍17

Ich hatte diese Frage selbst bezüglich des Imports von CSS aus einem npm-Paket.

zB rc-slider

import 'rc-slider/assets/index.css'

notrab picture notrab am 19. Juli 2017
👍12

Gab es darauf eine Antwort? @notrab

paulwehner picture paulwehner am 26. Aug. 2017

@notrab
Versuche dies

In Ihrer Root- oder _document-Komponente

import stylesheet from 'rc-slider/assets/index.css';

<div className='root'>
    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
    <Main />
</div>
saadbinsaeed picture saadbinsaeed am 28. Aug. 2017
😕3 👍1

@saadbinsaeed Ich habe das versucht. Es funktioniert für eigene Komponenten und Seiten. Aber ich möchte es mit Webpack bündeln, anstatt es inline zu haben.

schoenwaldnils picture schoenwaldnils am 15. Sept. 2017
👍1

@schoenwaldnils Ich habe es versucht, konnte es aber nicht. Nach meinem Verständnis verwenden wir eine serverseitige Anwendung, sodass wir die separaten CSS-Dateien nicht bündeln und an den Client senden können, da der Server nicht weiß, was CSS ist. Wir müssen das CSS in unser HTML einbetten. Um in Ihrer gesamten Anwendung darauf zuzugreifen, betten Sie es in die Root-Komponente ein oder verlinken Sie es im Header, wie oben von @sergiodxa gezeigt.

saadbinsaeed picture saadbinsaeed am 15. Sept. 2017

Ich habe den @sergiodxa- Ansatz ausprobiert, aber er funktioniert bei mir nicht. Gilt dies immer noch für die neuesten Versionen von Next?

nickwild-999 picture nickwild-999 am 14. Okt. 2017

@sergiodxa danke. Ich habe nur gesucht.

fredybustos picture fredybustos am 30. Nov. 2017

@sergiodxa Sie sollten Ihre Antworten ändern. Das ist keine Statik ! Es muss statisch sein

ayberkanilatsiz picture ayberkanilatsiz am 6. Dez. 2017
👍2

Die Verwendung von CSS-Importen ist jetzt mit https://github.com/zeit/next-plugins einfach

Entschuldigung für die 1 Jahr alte Problembeule. Anscheinend landen die Leute hier über Google.

timneutkens picture timneutkens am 22. Aug. 2018
👍1

Die Verwendung von CSS-Importen ist jetzt mit https://github.com/zeit/next-plugins einfach

Entschuldigung für die 1 Jahr alte Problembeule. Anscheinend landen die Leute hier über Google.

Nicht wirklich. Ich kann anscheinend keine einfache Möglichkeit finden, CSS direkt aus dem node_module zu importieren. Ist das beabsichtigt?

cyberdude picture cyberdude am 14. Sept. 2018
👍6

Die Verwendung von CSS-Importen ist jetzt mit https://github.com/zeit/next-plugins einfach
Entschuldigung für die 1 Jahr alte Problembeule. Anscheinend landen die Leute hier über Google.

Nicht wirklich. Ich kann anscheinend keine einfache Möglichkeit finden, CSS direkt aus dem node_module zu importieren. Ist das beabsichtigt?

Nicht wirklich nach der nächsten Version 7, hast du schon mal reingeschaut? es ist noch einfacher als vorher ;)

mtrabelsi picture mtrabelsi am 30. Sept. 2018

@mtrabelsi könnten Sie bitte ein Beispiel geben, wie Sie CSS direkt aus dem Knotenmodul in Next.js 7 importieren, weil ich damit nicht weiterkomme. Ich muss einige Stile aus dem Knotenmodul importieren, kann aber keine funktionierende Lösung finden.

bogdan100 picture bogdan100 am 13. Nov. 2018

Wir haben dieses Problem durch die Verwendung von copy-webpack-plugin behoben.
In der Webpack-Konfiguration (next.config.js):

config.plugins.push( new CopyWebpackPlugin([ { from: path.join(__dirname,'node_modules/react-datepicker/dist/react-datepicker.css'), to: path.join(__dirname, 'static/react-datepicker.css') } ]) );

yarakhater picture yarakhater am 13. Dez. 2018

Sie können einen Fix für den clientseitigen CSS-Fix https://github.com/AmanAgarwal041/next-css-fix auschecken

AmanAgarwal041 picture AmanAgarwal041 am 17. Jan. 2019

Ich denke, es gibt einen einfacheren Weg, es zu tun:

3 einfache Schritte:

  1. next-css-Plugin installieren:
npm install --save @zeit/next-css
  1. Erstellen Sie in Ihrem Stammverzeichnis next.config.js mit folgendem Inhalt:
// next.config.js 
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})
  1. Jetzt sollten Sie in der Lage sein, Stylesheets von node_modules wie folgt zu importieren:
import 'bootstrap-css-only/css/bootstrap.min.css';

_Hinweis: Verwenden von Next v 8+_

Hintergrund:
Ich habe ein paar Stunden damit verbracht, einfach ein als node_module installiertes CSS zu importieren, und die verschiedenen Lösungen sind meistens hackige Problemumgehungen, aber wie oben gezeigt, gibt es eine einfache Lösung.
Es wurde von einem der Mitglieder des Kernteams bereitgestellt: https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

Vrq picture Vrq am 20. März 2019
👍18 🎉12 ❤7

Wenn jemand die Antwort von @sergiodxa verwendet, wenn Sie den Ordner static nennen, sollte das Link-Tag auf static verweisen.

garrettmaring picture garrettmaring am 14. Nov. 2019

😂 anscheinend lesen die Leute mehr GitHub-Probleme als die offizielle Dokumentation (https://github.com/zeit/next-plugins/tree/master/packages/next-css) 😂

mtrabelsi picture mtrabelsi am 14. Nov. 2019

@mtrabelsi , Dieses Problem ist imo wertvoller als die Dokumentation. Wenn Sie CSS direkt verwenden möchten, z. B. import 'bootstrap-css-only/css/bootstrap.min.css'; , wird in der Dokumentation nichts erwähnt, bis ich die Antwort von @Vrq gefunden habe

Tokenyet picture Tokenyet am 24. Nov. 2019
👍1

@timneutkens

Ich versuche, einfach meine eigene normale CSS-Datei zu importieren. Am Ende ist der richtige Weg zum Importieren anhand der Dokumentation in https://github.com/zeit/next-plugins/tree/master/packages/next-css
oder ist der richtige Weg, die @sergiodxa- Antwort von 2017 zu verwenden, die über einen Link im <Head> -Tag importiert wird?

Hier ist, was ich auf meiner Seite gefunden habe:

  • Beide Methoden funktionieren, wenn Sie eine Seite direkt laden (direkt zur URL gehen)
  • Nur der Sergios-Weg funktioniert, wenn Sie zum ersten Mal mit Router.push zu einer Seite navigieren (bei Verwendung des Weges aus der next-css-Dokumentation wird das CSS nicht geladen).
  • Das einzige Problem mit Sergios Methode ist, dass ich immer noch das Aufblitzen von nicht formatiertem HTML sehe, wenn ich zum ersten Mal mit Router.push auf eine Seite gehe

Haben Sie eine Idee, wie Sie diesen Flash vermeiden können, ohne mein CSS in die _document-Datei aufnehmen zu müssen?

Bin dankbar.

Ollynov picture Ollynov am 3. Dez. 2019

Siehe #8626 für CSS-Unterstützung für Next.js!

Timer picture Timer am 3. Dez. 2019
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

lixiaoyan picture lixiaoyan  ·  3Kommentare
knipferrc picture knipferrc  ·  3Kommentare
rauchg picture rauchg  ·  3Kommentare
ghost picture ghost  ·  3Kommentare
wagerfield picture wagerfield  ·  3Kommentare