Detaillierte Erläuterung der Schritte zur Verwendung von less in vue2

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von weniger mit vue2 ausführlich erklären. Was sind die Vorsichtsmaßnahmen für die Verwendung von weniger mit vue2?

Lassen Sie mich zunächst erklären, dass, wenn das Projekt mit dem npm init webpack Projektnamen erstellt wird, das Webpack

nicht manuell konfiguriert werden muss, sodass die Verwendung von less in Vue sehr einfach ist , einfach Installierenless, less-loader ist genug

Schritte

npm install less less-loader --save //将less和less-loader安装到开发依赖
npm run dev

Wenn die Installation erfolgreich ist, können Sie less in der Vue-Komponente verwenden

<style lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }

Ergänzung:

So verwenden Sie weniger in Vue

http://element.eleme.io/ //

elementUI basiert auf vue2

Weniger in Vue verwenden

Zuerst wurde die Vue-Entwicklungsumgebung erfolgreich installiert

Wenn alles fertig ist:

Schritt eins :

Weniger Abhängigkeiten installieren, npm install less less-loader --save

Schritt 2:

Ändern Sie die Datei webpack.config.js, konfigurieren Sie den Loader zum Laden von Abhängigkeiten und lassen Sie ihn externe Unterstützung unterstützen weniger, basierend auf dem Originalcode. Fügen Sie

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},

hinzu. Jetzt ist die Installation im Grunde genommen abgeschlossen. Wenn Sie sie verwenden, fügen Sie dann lang="less" im Style-Tag hinzu, um weniger Code zu schreiben (und nur „scoped“ zum Style-Tag hinzuzufügen). (funktioniert hier) Domain ist gültig)

（或者
@import './index.less'; //引入全局less文件
）。
(
html中直接引入：
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less" rel="external nofollow" >
<script src="文件路径/less.js" type="text/javascript"></script>
)

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS-Übertragung der linken Liste nach rechts

Analyse der JS-Time-Sharing-Funktion

Detaillierte Erläuterung der Schritte zur Übergabe von Array-Parametern an den Controller über js

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von less in vue2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!