web-dev-qa-db-fra.com

Utilisation de reactstrap avec Next.js

Je crée une application React en utilisant Next.js Et essaie d'utiliser les composants fournis par reactstrap.

Le problème que je semble rencontrer semble impliquer l’importation du fichier CSS nommé bootstrap/dist/css/bootstrap.min.css Comme le guide reactstrap le dit.

L'erreur que je vois est Error in bootstrap/dist/css/bootstrap.min.css Module parse failed: Unexpected token (6:3) You may need an appropriate loader to handle this file type.

Est-ce que quelqu'un sait ce que je dois faire pour que cela fonctionne correctement? Je suis un nouveau développeur Web, donc je suis désolé si quelque chose d’évident me manque.

Merci!

javascriptcssreactjsnext.jsreactstrap
17
gsapienza

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 withCSS plugin dans votre next.config.js. Commencez par installer le plugin:

npm install --save @zeit/next-css

Puis créez le next.config.js dans la racine de votre projet et ajoutez-y les éléments suivants:

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

Vous pouvez vérifier 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 fichier index.js fichier. Ensuite, vous pouvez faire ce genre de choses 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 plus d'informations à ce sujet, consultez la documentation sur nextjs.org/docs/#css .

Next.js <version 7

Next.js ne vient pas avec les importations CSS par défaut. Vous devrez utiliser un chargeur Webpack. Vous pouvez lire comment cela fonctionne ici: https://zeit.co/blog/next5#css,-less,-sass,-scss-and-css-modules .

Next.js a également des plugins pour CSS, SASS et SCSS. Voici le plugin pour CSS: https://github.com/zeit/next-plugins/tree/master/packages/next-css . La documentation de ce plugin le rend assez simple:

  1. Vous créez le _document fichier dans pages/.
  2. Vous créez le next.config.js fichier dans la racine.

L'utilisation des extraits de code de la documentation devrait vous permettre d'importer des fichiers CSS.

Vous aurez besoin d'au moins la version 5.0. Vous pouvez vous assurer d’avoir installé le dernier Next.js: npm i next@latest.

27
mtl

Si vous obtenez toujours l'erreur:

Unexpected token (6:3) You may need an appropriate loader to handle this file type.

essayez ceci dans votre next.config.js:

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

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})
  1. Vous devriez maintenant pouvoir importer des styleshets à partir de node_modules comme ceci:
import 'bootstrap-css-only/css/bootstrap.min.css';

Note: Utilisation de Next v 8 +

Arrière-plan: J'ai passé quelques heures à essayer simplement d'importer un CSS installé en tant que node_module et les différentes solutions sont pour la plupart des solutions de contournement, mais comme illustré ci-dessus, est un solution simple .

Il a été fourni par l'un des membres de l'équipe principale

3
Janusz Tomasik