Que faire s'il y a une erreur dans le CSS de l'empaquetage du webpack

Solution à l'erreur CSS du package webpack : 1. Modifiez la syntaxe d'utilisation de webpack2 en "-loader" ; 2. Ajoutez "style-loader" 3. Modifiez l'ordre en "style-loader!css-loader" ; ;

L'environnement d'exploitation de cet article : système Windows7, version webpack2.0&&css3, ordinateur Dell G3.

Problème : le webpack est empaqueté avec succès, mais une erreur CSS se produit, CSS ne fonctionne pas

Analyse/solution du problème : les raisons sont les suivantes

Utilise la syntaxe webpack2 Les règles sont incorrectes ; webpack2 exige que -loader soit écrit ;

ne peut être écrit que comme css-loader, mais pas comme style-loader

est dans l'ordre inverse et doit être écrit comme ; style-loader!css-loader;

Extension :

Question : Que se passera-t-il si style-loader ou css-loader n'est pas écrit ;

Réponse :

Style-loader non écrit, le fichier de build sera généré, mais vous constaterez que le js dans la page ne fonctionne pas

Si vous n'écrivez pas css-loader, une erreur sera signalée ; directement : 'Vous aurez peut-être besoin d'un chargeur approprié pour gérer ce type de fichier.'

Q : Quelles sont les fonctions de style-loader et css-loader ?

Réponse :

Style-loader ne fonctionne tout simplement pas et ne signale pas d'erreur, ce qui signifie que sa fonction est d'insérer le style dans l'élément DOM combiné avec les réponses sur le ; Internet et en observant la page d'aperçu, nous avons trouvé : style -loader générera un ;

interne dans la balise d'en-tête de la page. css-loader signalera une erreur car il. affecte le processus de création du webpack. Combiné avec le partage en ligne et le message d'erreur « Vous aurez peut-être besoin d'un chargeur approprié pour gérer ce type de fichier. », cela signifie que l'existence de css-loader permet l'introduction de CSS dans js via require ou l'importation réussie via css-loader ; il peut être implémenté dans des fichiers js. Introduisez CSS via require.

Mon fichier de configuration

const webpack = require('webpack');
const path = require('path');
module.exports = {
   entry: {
       'bundle': './a.js',
   },
   output: {
       path: path.resolve(__dirname, 'build'),
       filename: '[name].js',
       chunkFilename: '[name].js'
   },
   module: {
       loaders: [
           {
               test: /\.css$/,
               loader: 'style-loader!css-loader'
           },
           {
               test: /\.js[x]?$/,
               exclude: 'node_modules/',
               loader: 'babel-loader'
           }
       ]
   },
 plugins: [
  ]
};

Recommandé : "Tutoriel vidéo CSS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!