Was tun, wenn im CSS der Webpack-Verpackung ein Fehler auftritt?

Lösung für den Webpack-CSS-Verpackungsfehler: 1. Ändern Sie die Verwendungssyntax von webpack2 in „-loader“. 2. Fügen Sie „style-loader“ hinzu. 3. Ändern Sie die Reihenfolge in „style-loader!css-loader;“.

Die Betriebsumgebung dieses Artikels: Windows7-System, Webpack2.0- und CSS3-Version, Dell G3-Computer.

Problem: Webpack wurde erfolgreich gepackt, aber ein CSS-Fehler tritt auf und CSS funktioniert nicht

Problemanalyse/Lösung: Die Gründe sind wie folgt:

Die Syntaxregeln von Webpack2 sind falsch; für Webpack2 muss -loader geschrieben werden;

Möglicherweise wird nur CSS-Loader geschrieben, Style-Loader wird nicht geschrieben;

Die Reihenfolge ist umgekehrt, es muss Style-Loader!CSS-Loader;

Erweiterung:

Q geschrieben werden: Was ist, wenn Style-Loader oder CSS -loader ist nicht geschrieben?

Antwort:

Wenn der Style-Loader nicht geschrieben ist, werden Sie feststellen, dass die js auf der Seite nicht funktionieren. Wenn der Loader nicht geschrieben ist, wird direkt ein Fehler gemeldet: „Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten.“

F: Welche Funktionen haben Style-Loader und CSS-Loader?

Antwort:

Die Tatsache, dass der Style-Loader einfach nicht funktioniert und keinen Fehler meldet, bedeutet, dass seine Funktion darin besteht, den Stil in das DOM-Element einzufügen, kombiniert mit den Antworten im Internet und der Beobachtung der Vorschauseite. Wir haben festgestellt, dass sich der Style-Loader im Header-Tag der Seite befindet. Der interne ;

　css-loader meldet einen Fehler, da er den Webpack-Erstellungsprozess beeinträchtigt. In Kombination mit der Online-Freigabe und der Fehlermeldung „Sie benötigen möglicherweise einen geeigneten Loader, um diesen Dateityp zu verarbeiten.“ bedeutet dies, dass die Einführung von CSS in js über „require“ oder „importieren“ über den CSS-Loader erfolgreich ist. Es kann in js-Dateien implementiert werden. Führen Sie CSS über require ein.

Meine Konfigurationsdatei

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: [
  ]
};

Empfohlen: „

CSS-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonWas tun, wenn im CSS der Webpack-Verpackung ein Fehler auftritt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!