So verwenden Sie less in VueJS

Methode: 1. Installieren Sie weniger Abhängigkeiten. 2. Ändern Sie die Datei „webpack.config.js“ und konfigurieren Sie den Loader so, dass er weniger Abhängigkeiten unterstützt. 3. Fügen Sie „ less Code“ zu den erforderlichen hinzu Seiten. /style>"-Anweisung ist ausreichend.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

vuejs-Konfiguration verbraucht weniger

Der erste Schritt: Installieren Sie weniger Abhängigkeiten,

npm install less less-loader --save Der zweite Schritt:

Ändern Sie die Datei webpack.config.js, konfigurieren Sie den Loader so, dass Abhängigkeiten geladen werden dass es extern unterstützt Fügen Sie für weniger

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader",

}, zum Originalcode hinzu

Schritt 3: Verwenden Sie less

Fügen Sie bei der Verwendung lang="less" in das Style-Tag ein und Sie können schreiben weniger im Inneren Der Code

Fügen Sie einen Bereich zum Style-Tag hinzu, damit er nur in diesem Bereich gültig ist

或者@import './index.less'; //引入全局less文件 Verwandte Empfehlungen: „ vue.js Tutorial “