Ein einfaches Tutorial zur Verwendung von less in vue2

In diesem Artikel wird hauptsächlich ein einfaches Tutorial für die Verwendung von less in vue2 vorgestellt. Da das Webpack nicht manuell konfiguriert werden muss, ist die Verwendung von less und less-loadder sehr einfach > Lassen Sie mich zunächst erklären, dass, wenn das Projekt mit dem

Projektnamen erstellt wird, das Webpack

npm init webpack nicht manuell konfiguriert werden muss, sodass die Verwendung von less in Vue sehr einfach ist installiere less und less-loader

Schritte

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

Wenn die Installation erfolgreich ist, kannst du 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:

Installieren Weniger Abhängigkeiten,

npm install less less-loader --saveZweiter Schritt:

Ändern Sie die Datei webpack.config.js, konfigurieren Sie den Loader zum Laden von Abhängigkeiten und aktivieren Sie ihn für die Unterstützung externer Weniger. Hinzufügen

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

zum Originalcode hinzufügen und jetzt ist er im Grunde genommen fertig. Die Installation ist abgeschlossen. Wenn Sie ihn dann verwenden, fügen Sie lang="less" zum Style-Tag hinzu, und Sie können weniger Code schreiben (fügen Sie zum Style-Tag nur „scoped“ hinzu, um nur be zu sein). gültig in diesem Bereich)

（或者
@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>
)

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Lösung für 403-Fehler bei der Verwendung von JQuery-Ajax-Post-Daten in Django

So verwenden Sie Ajax-Post im Django-Framework Methode

So lösen Sie das Problem chinesischer verstümmelter Zeichen, wenn JQuery Ajax JSON zurückgibt

Das obige ist der detaillierte Inhalt vonEin einfaches Tutorial zur Verwendung von less in vue2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!