Heim  >  Artikel  >  Web-Frontend  >  So beheben Sie einen CSS-Fehler beim Konfigurieren von Mint-UI in Vue

So beheben Sie einen CSS-Fehler beim Konfigurieren von Mint-UI in Vue

小云云
小云云Original
2018-01-25 10:50:202478Durchsuche

Nach der Einführung von mint-ui in vue2.0 wurde immer ein CSS-Fehler gemeldet. Dieser Artikel stellt hauptsächlich die Lösung für das Problem der Konfiguration von mint-ui in vue vor. Es ist von großem praktischem Wert Als nächstes kann ich hoffen, dass es allen helfen kann.

Der CSS-Loader-Style-Loader wurde jedoch in package.json konfiguriert, und CSS wurde auch in webpack.config konfiguriert. Dieser Fehler tritt jedoch auf wird immer noch gemeldet. Im Gegenteil: Wenn Sie die CSS-Konfiguration in webpack.config auskommentieren, wird kein Fehler angezeigt.

Da das Verzeichnis, in das CSS importiert wird, nicht in webpack.config festgelegt ist, importieren wir standardmäßig nur CSS in das Verzeichnis /src/, Mint-UI muss jedoch in die node_modules importiert werden , also fügen Sie ein Element


{
    test: /\.css$/,
    include: [
     /src/,
     '/node_modules/mint-ui/lib/'  //增加此项
    ],
    loader: "style!css"
   },

zur CSS-Konfiguration in webpack.config hinzu. Natürlich sollte babelrc wie folgt konfiguriert sein:


{
 "presets": [
    "es2015","stage-0"
    ],
 "plugins": [
  ["component", [
   { 
    "libraryName": "mint-ui",
    "style": true 
   }
  ]]
 ]
}

Stellen Sie sicher, dass alle Plug-Ins, die es6 in es5 konvertieren, installiert wurden

Die Konfiguration im Webpack .config muss vollständig sein:

Wenn Presets:['es2015'] nicht in webpack.config konfiguriert ist, wird ein Importfehler gemeldet:

Dieser Fehler wird durch den Fehler beim Es6-Syntax-Escape verursacht.

Hinweis: Die Konfiguration von webpack.config hängt von der Version des Webpacks ab Verschiedene Konfigurationsmethoden. Hier wird die webpack1.0-Version verwendet.

Verwandte Empfehlungen:

Einführung in die Verwendung von Picker in Vue Mint-UI

Vue Mint-UI imitiert die Lieferadresse von Taobao Jingdong Vierstufige Verknüpfung

Analyse der Loadmore-Komponente in Vue Mint-UI

Das obige ist der detaillierte Inhalt vonSo beheben Sie einen CSS-Fehler beim Konfigurieren von Mint-UI in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn