Detaillierte Erläuterung der Schritte zum Festlegen globaler Stile in Vue2.0

Dieses Mal werde ich Ihnen Schritt für Schritt erklären, wie Sie globale Stile in Vue2.0 festlegen. Was sind die Vorsichtsmaßnahmen und welche praktischen Fälle gibt es unten? aufstehen und einen Blick darauf werfen.

Das Festlegen globaler Stile für Vue erfordert mehrere Schritte (wenn es sass ist, ändern Sie einfach less in sass)

Schritt eins: Fügen Sie den folgenden Code

in main.js im src-Verzeichnis hinzu, d. h. in der

require('!style-loader!css-loader!less-loader!./common/less/index.less')

Eintragsdatei

Sie können in Version 1.0 von Vue so schreiben, aber in Version 2.0 funktioniert es nicht. Es wird ein Fehler gemeldet, der auf einen Analysefehler hinweist

require('./common/less/index.less')

Zweiter Schritt: Konfigurieren Sie das Modul webpack.base.conf.js im Build-Verzeichnis. Sie müssen nur zwei Module unter Regeln hinzufügen

module.exports = {
 module: {
 rules: [
  {
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
  },
  {
  test:/\.css$/,
  loader:'css-loader!style-loader',
  }
 ] 
 }  
}

Schritt 3: Wenn ein Fehler gemeldet wird, haben Sie möglicherweise die oben genannten Abhängigkeiten nicht installiert. Sie müssen Abhängigkeiten

zur Datei package.json im Stammverzeichnis hinzufügen Verzeichnis.

Schritt 4: Führen Sie den Befehl im Befehlsfenster aus, um Abhängigkeiten zu installieren

npm install

Linux (Ubuntu, Deepin) und das Mac OS-System weisen möglicherweise darauf hin, dass die Berechtigung nicht ausreicht und Sie eine Berechtigung einholen müssen. Sie müssen dann nur die Berechtigung im Voraus einholen

sudu npm install

Wenn Sie später weniger verwenden müssen, fügen Sie einfach das lang -Attribut zum Stil

<style></style>

hinzu Wenn es viele öffentliche Dateien gibt, können Sie sie alle in einer Datei zusammenfassen und über öffentliche Dateilinks globale Stile für mehrere Stildateien implementieren.

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Spannende Informationen, bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie element-ui die Wiederverwendung von Tabellenkomponenten implementiert

Detaillierte Erläuterung der Scope-Nutzung von js

JS+Canvas zum Erstellen einer Rotationsanimation

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Festlegen globaler Stile in Vue2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!