Next.js: Inclure CSS dans un prochain projet ?

Créé le 27 nov. 2016 · 31Commentaires · Source: vercel/next.js

Je sais que Next utilise Glamour et css-in-js. Mais, existe-t-il un moyen d'utiliser du vrai css/less/scss dans un projet Next... d'une manière ou d'une autre ? Au moins pour démarrer un projet ?

Mon raisonnement est le suivant - pour les sites simples, tels que ceux ciblés par Next, la plupart des thèmes html prédéfinis pouvant être achetés en ligne sont créés à l'aide de html et de css purs. Donc, tout ce que vous avez à faire est de découper le HTML en composants de réaction, de les placer dans les dossiers de page appropriés, et vous avez terminé.

J'aimerais vraiment utiliser Next pour mon projet, mais si je ne suis pas en mesure de tirer parti d'une manière ou d'une autre de CSS prêts à l'emploi, ce serait une rupture pour moi. Existe-t-il une solution ou un contournement pour ce cas d'utilisation ?

Source

manolkalinov

Commentaire le plus utile

Créez un dossier /static au même niveau que le dossier /pages .
Dans ce dossier, placez vos fichiers .css
Dans vos composants de page, importez Head et ajoutez un <link /> à votre CSS.

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>
)

Et c'est tout, de cette façon, Next.js devrait afficher la balise de lien dans l'en-tête de la page et le navigateur téléchargera le CSS et l'appliquera.

sergiodxa le 27 nov. 2016

👍79 👎17 🎉7 ❤2 🚀1

Tous les 31 commentaires

Créez un dossier /static au même niveau que le dossier /pages .
Dans ce dossier, placez vos fichiers .css
Dans vos composants de page, importez Head et ajoutez un <link /> à votre CSS.

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>
)

Et c'est tout, de cette façon, Next.js devrait afficher la balise de lien dans l'en-tête de la page et le navigateur téléchargera le CSS et l'appliquera.

sergiodxa le 27 nov. 2016

👍79 👎17 🎉7 ❤2 🚀1

Wow, merci pour la réponse rapide :). Ça marche! Il y a juste un hic - lors du premier chargement de la page, il y a un flash du code HTML sans style juste avant que tout ne soit rendu correctement. Je ne sais pas si cela provient de fichiers css ou js chargés après la réaction. Y aurait-il une solution de contournement pour cela?

Quoi qu'il en soit, je suis absolument impressionné par le travail que vous faites et merci encore pour la réponse rapide !

manolkalinov le 28 nov. 2016

Peu importe, j'ai également importé le composant d'en-tête avec les liens css et js dans la page d'index, et le flash a disparu. De plus, la modification des balises d'ancrage en composants Link supprime tout saut restant. L'inconvénient est que le composant Link semble supprimer toutes les balises html de ses enfants (telles que les balises span avec des classes d'icônes), de sorte qu'il ne reste que du texte.

Je sais que ce cas d'utilisation est à l'opposé de correct et optimisé, mais il est vraiment utile dans les cas où nous devons recourir à la laideur rapide et sale :)

Ainsi, le flux de travail pour intégrer un thème html prédéfini est le suivant :

créer un dossier statique et copier/déplacer tous les fichiers js/css/img du modèle
créer un fichier page.js avec un composant
Ajouter le html au composant et le modifier pour se conformer à réagir
3.1. ajoutez la balise Head et incluez-y tous les fichiers css/js du html d'origine
3.2. mettre à jour le chemin d'accès à ces fichiers pour qu'il corresponde au nouveau dossier statique
3.3. Copiez/collez le html sous la balise head
3.4 Fermer ou fermer automatiquement toutes les balises html non fermées (y compris les balises link, input et img)
3.5. Rechercher/remplacer toutes les instances de class=" par className="
3.6. Supprimer tous les commentaires html

manolkalinov le 28 nov. 2016

👍9 🎉3 😄3

@manolkalinov pouvez-vous s'il vous plaît ajouter votre code pour une référence facile ? Je sais que vous avez écrit le flux de travail, mais un exemple de code facilite le suivi et le débogage en cas de problème.

ralphievolt le 29 nov. 2016

👍1

L'ajout de CSS dans la balise head fonctionne à coup sûr. Cependant, c'est un peu hacky et que se passe-t-il si nous voulons utiliser quelque chose comme postcss ou sass ? Comment convertir les styles CSS existants en objet glamour JSON ? Il est également très difficile pour les concepteurs de styliser la page en utilisant glamor . Il doit y avoir une meilleure façon de le faire.
Au fait, par rapport aux modules CSS, quel est l'avantage d'utiliser glamor ?

dzcpy le 30 nov. 2016

👍6

@andyhu veuillez lire https://github.com/zeit/next.js#faq sur les avantages d'utiliser glamor .
À propos postcss ou sass , la personnalisation de la configuration du pack Web vous permettrait de les utiliser (https://github.com/zeit/next.js/pull/222), ou je pense que vous pouvez simplement compilez ces fichiers en css avant d'exécuter next .

nkzawa le 1 déc. 2016

Je pense que c'est résolu. N'hésitez pas à rouvrir si le problème persiste. Merci pour votre réponse @sergiodxa !

nkzawa le 1 déc. 2016

@nkzawa J'utilise la personnalisation de la configuration Webpack, donc je peux en utiliser moins dans mon projet. Voici mon code
suivant.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
}

alors j'ai besoin du moins de fichier import './index.less' , mais une erreur se produit

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

Je suis sûr d'avoir installé less , less-loader , css-loader , style-loader , pouvez-vous donner une suggestion, merci d'avance.

kimown le 5 janv. 2017

Tu devrais essayer

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

bkniffler le 9 janv. 2017

@kimown Avez-vous réussi à importer le fichier less ? Si oui, pourriez-vous partager comment vous l'avez fait ?

crodriguezvega le 25 juin 2017

@sergiodxa Comment puis-je importer des CSS à partir de node_modules ?

saadbinsaeed le 19 juil. 2017

👍17

J'avais moi-même cette question concernant l'importation de CSS à partir d'un package npm.

Par exemple rc-curseur

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

notrab le 19 juil. 2017

👍12

Y avait-il une réponse à cela? @notrab

paulwehner le 26 août 2017

@notrab
Essaye ça

Dans votre composant racine ou _document

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

<div className='root'>
    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
    <Main />
</div>

saadbinsaeed le 28 août 2017

😕3 👍1

@saadbinsaeed J'ai essayé ça. Cela fonctionne pour ses propres composants et pages. Mais je veux le regrouper avec webpack, au lieu de l'avoir en ligne.

schoenwaldnils le 15 sept. 2017

👍1

@schoenwaldnils J'ai essayé de le faire mais je n'ai pas pu. Selon ma compréhension, nous utilisons une application côté serveur, nous ne pouvons donc pas regrouper les fichiers CSS séparés et les envoyer au client car le serveur ne sait pas ce qu'est CSS. nous devons intégrer le css dans notre html. Pour y accéder dans l'ensemble de votre application, intégrez-le dans le composant racine ou liez-le dans l'en-tête, comme indiqué ci-dessus par @sergiodxa.

saadbinsaeed le 15 sept. 2017

J'ai essayé l'approche @sergiodxa , mais cela ne fonctionne pas pour moi. Est-ce toujours applicable avec les dernières versions de Next ?

nickwild-999 le 14 oct. 2017

@sergiodxa merci. Juste que je cherchais.

fredybustos le 30 nov. 2017

@sergiodxa Vous devriez changer vos réponses. Ce n'est pas de la statique ! Il doit être statique

ayberkanilatsiz le 6 déc. 2017

👍2

L'utilisation des importations CSS est simple maintenant en utilisant https://github.com/zeit/next-plugins

Désolé pour le problème d'un an. Apparemment, les gens se retrouvent ici via Google.

timneutkens le 22 août 2018

👍1

L'utilisation des importations CSS est simple maintenant en utilisant https://github.com/zeit/next-plugins
Désolé pour le problème d'un an. Apparemment, les gens se retrouvent ici via Google.

Pas vraiment. Je n'arrive pas à trouver un moyen simple d'importer du CSS directement à partir du node_module. Est-ce par conception?

cyberdude le 14 sept. 2018

👍6

L'utilisation des importations CSS est simple maintenant en utilisant https://github.com/zeit/next-plugins
Désolé pour le problème d'un an. Apparemment, les gens se retrouvent ici via Google.
Pas vraiment. Je n'arrive pas à trouver un moyen simple d'importer du CSS directement à partir du node_module. Est-ce par conception?

Pas vraiment après la prochaine version 7, avez-vous déjà jeté un œil ? c'est encore plus simple qu'avant ;)

mtrabelsi le 30 sept. 2018

@mtrabelsi pourriez-vous s'il vous plaît donner un exemple comment importer du css directement à partir du module de nœud dans Next.js 7 parce que je suis coincé avec ça. J'ai besoin d'importer certains styles à partir du module de nœud mais je ne trouve pas de solution qui fonctionne.

bogdan100 le 13 nov. 2018

Nous avons résolu ce problème en utilisant copy-webpack-plugin.
Dans la configuration du pack Web (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 le 13 déc. 2018

vous pouvez vérifier un correctif pour le correctif css côté client https://github.com/AmanAgarwal041/next-css-fix

AmanAgarwal041 le 17 janv. 2019

Je pense qu'il y a un moyen plus simple de le faire:

3 étapes simples :

Installez le plug-in next-css :

npm install --save @zeit/next-css

Créez dans votre répertoire racine next.config.js avec le contenu suivant :

// next.config.js 
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

Vous devriez maintenant pouvoir importer des feuilles de style à partir de node_modules comme ceci :

import 'bootstrap-css-only/css/bootstrap.min.css';

_Remarque : Utilisation de Next v 8+_

Fond:
J'ai passé quelques heures à essayer d'importer simplement un CSS installé en tant que node_module et les différentes solutions sont pour la plupart des solutions de contournement hacky, mais comme indiqué ci-dessus, il existe une solution simple.
Il a été fourni par l'un des membres de l'équipe principale : https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

Vrq le 20 mars 2019

👍18 🎉12 ❤7

Si quelqu'un utilise la réponse de @sergiodxa , si vous nommez le dossier static , la balise de lien doit faire référence à static .

garrettmaring le 14 nov. 2019

😂 il semble que les gens lisent plus les problèmes de GitHub que la documentation officielle (https://github.com/zeit/next-plugins/tree/master/packages/next-css) 😂

mtrabelsi le 14 nov. 2019

@mtrabelsi , Ce problème est plus précieux que la documentation imo, Si vous voulez utiliser css directement, par exemple import 'bootstrap-css-only/css/bootstrap.min.css'; , il n'y a rien de mentionné dans la documentation jusqu'à ce que je trouve la réponse de @Vrq

Tokenyet le 24 nov. 2019

👍1

@timneutkens

J'essaie simplement d'importer mon propre fichier CSS normal. En fin de compte, c'est la bonne façon de l'importer en utilisant la documentation dans https://github.com/zeit/next-plugins/tree/master/packages/next-css
ou est-ce la bonne façon d'utiliser la réponse @sergiodxa de 2017, qui importe via un lien dans la balise <Head> ?

Voici ce que j'ai trouvé de mon côté :

Les deux méthodes fonctionnent lorsque vous chargez une page directement (allez directement à l'url)
Seule la méthode Sergios fonctionne lorsque vous accédez à une page pour la première fois avec Router.push (l'utilisation de la méthode de la documentation next-css ne charge pas le css)
Le seul problème avec la méthode de Sergio est que je vois toujours le flash de html sans style lorsque je vais sur une page pour la première fois avec Router.push

Une idée de comment éviter ce flash, sans avoir besoin d'inclure mon css dans le fichier _document ?

Appréciez-le.