web-dev-qa-db-fra.com

React avec NextJS et Next-CSS: vous pourriez avoir besoin d'un chargeur approprié pour gérer ce type de fichier

Pour construire une React-App i à l'aide de NextJS. Pour utiliser un fichier css, j'utilise le next-css plugin pour faire ça. Mais lorsque je crée mon application, j'obtiens l'erreur suivante:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

Ma next.config.js fichier, ressemble à ceci:

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  cssModules: false,
})

J'importe et utilise un fichier .css dans mes composants comme suit:

import '../style.css'
export default () => <div className="example">Hello World!</div>

Mon fichier css ressemble à ceci:

.example {
  color: red;
 }

Où est mon problème? Quelqu'un peut-il m'aider à résoudre ce problème?

cssreactjswebpacknext.js
9
Niklas

J'ai résolu le problème. Dans mon next.config.js j'utilise plusieurs plugins. Mon erreur était que j'avais écrit plusieurs module.exports déclarations. Dans mon cas, la solution ressemble à ceci:

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

module.exports = withImages(withCSS());
15
Niklas

Je ne sais pas quel problème vous avez, mais je viens de suivre exemple de documentation :

1 Next-css installé npm install --save @zeit/next-css

2 Créé next.config.js

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

3 Créé style.css fichier dans le dossier racine

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

4 Création d'une page de test comprenant des styles

import '../style.css';

export default () => <div className="example">Hello World!</div>;

et le résultat montre this

J'ai les dépendances suivantes

"@zeit/next-css": "^1.0.1",
"next": "^7.0.0",
"react": "^16.5.2",
"react-dom": "^16.5.2"

J'espère que ça vous aide un peu!

5
iurii

Essayez ceci dans votre next.config.js: 

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

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

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

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

Remarque: Utilisation de Next v 8 +

Contexte: J'ai passé quelques heures à essayer d'importer simplement un CSS installé en tant que node_module et les différentes solutions sont principalement des solutions de contournement hacky, mais comme indiqué ci-dessus, il est 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 =

2
Janusz Tomasik