web-dev-qa-db-fra.com

Next.js - l'importation du fichier CSS ne fonctionne pas

Je crée un projet avec react, redux et next.js, et je souhaite importer des fichiers CSS dans js.

J'ai suivi les instructions dans next.js/# css et next-css , mais je constate que les styles CSS ne fonctionnent pas.

Mon code est le suivant:

pages/index.js:

import React from 'react'
import "../style.css"

class Index extends React.Component {
    render() {
        return (
            <div className="example">Hello World!</div>
        );
    }
}

export default Index

next.config.js:

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

style.css:

.example {
    font-size: 50px;
    color: blue;
}

package.json:

{
    "name": "my-app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@zeit/next-css": "^0.1.5",
        "next": "^6.0.0",
        "react": "^16.3.2",
        "react-dom": "^16.3.2",
        "react-redux": "^5.0.7",
        "react-scripts": "1.1.4",
        "redux": "^4.0.0",
        "redux-devtools": "^3.4.1"
    },
    "scripts": {
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "dev": "next",
        "build": "next build",
        "start": "next start"
    }
}

Questions :

1. Il y a une "Uncaught SyntaxError" dans Chrome, mais cela ne semble pas affecter le rendu de la page. Mais je me demande toujours la raison et la solution. erreur index.js dans chrome is below img

2. Comme indiqué dans Chrome, il n'y a pas de classe "exemple", ce qui signifie que le fichier style.css n'est pas chargé. Suis-je en train de manquer quelque chose? aucun fichier CSS en chrome

Merci d'avance.

javascriptreactjsnext.js
9
ArgenBarbie

EDIT: à partir de Next.js 7 , tout ce que vous avez à faire pour prendre en charge l'importation de fichiers .css est d'enregistrer le avecCSS plugin dans votre next.config.js. Commencez par installer le plugin:

npm install --save @zeit/next-css

Créez ensuite le next.config.js fichier dans la racine de votre projet et ajoutez ce qui suit:

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({/* my next config */})

Vous pouvez tester que cela fonctionne en créant une page simple et en important du CSS. Commencez par créer un fichier CSS:

// ./index.css
div {
    color: tomato;
}

Créez ensuite le dossier pages avec un index.js fichier. Ensuite, vous pouvez faire des choses comme ça dans vos composants:

// ./pages/index.js
import "../index.css"
export default () => <div>Welcome to next.js 7!</div>

Vous pouvez également utiliser des modules CSS avec quelques lignes de configuration. Pour en savoir plus, consultez la documentation sur nextjs.org/docs/#css .

Obsolète: Next.js <7:

Vous devrez également créer un _document.js fichier dans votre dossier pages et lien vers le fichier CSS compilé. Essayez-le avec le contenu suivant:

// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

La feuille de style est compilée en .next/static/style.css ce qui signifie que le fichier CSS est servi à partir de /_next/static/style.css, qui est la valeur de l'attribut href dans la balise link dans le code ci-dessus.

Quant à la première question, c'est probablement Chrome ne comprenant pas la syntaxe d'importation. Essayez d'activer l'indicateur Experimental Web Platform dans chrome:flags et voyez si cela le résout.

10
mtl

vous devez créer un fichier _ document.js personnalisé.

Le document personnalisé lors de l'ajout de css ressemblera à:

import React from "react";

import Document, { Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {

  render() {
    const { buildManifest } = this.props;
    const { css } = buildManifest;
    return (
      <html lang="fa" dir="rtl">
        <Head>
          {css.map(file => (
            <link rel="stylesheet" href={`/_next/${file}`} key={file} />
          ))}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}
0
amin_2c

Si vous utilisez next.js, faites-le.

créer next.config.js dans les projets racine

const withCSS = require('@zeit/next-css');

function HACK_removeMinimizeOptionFromCssLoaders(config) {
    console.warn(
        'HACK: Removing `minimize` option from `css-loader` entries in Webpack config',
    );
    config.module.rules.forEach(rule => {
        if (Array.isArray(rule.use)) {
            rule.use.forEach(u => {
                if (u.loader === 'css-loader' && u.options) {
                    delete u.options.minimize;
                }
            });
        }
    });
}

module.exports = withCSS({
    webpack(config) {
        HACK_removeMinimizeOptionFromCssLoaders(config);
        return config;
    },
});

N'oubliez pas de redémarrer le serveur

0
Mehrdad Masoumi

Comme Zeit a dit:

  1. Créez un dossier/statique au même niveau que le dossier/pages.
  2. Dans ce dossier, placez vos fichiers .css
  3. Dans vos composants de page, importez Head et ajoutez un à votre CSS.
import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

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

Merci Sergiodxa à Github pour cette solution claire.

0
Hamed