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. </p></blockquote> <p><img src="https://img.php.cn/upload/article/000/000/024/6152c7824ab3b327.jpg" alt="So verwenden Sie less in VueJS" ></p> <p>Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer. </p> <p><span style="font-size: 18px;"><strong>vuejs-Konfiguration verbraucht weniger</strong></span></p> <p><strong>Der erste Schritt: </strong>Installieren Sie weniger Abhängigkeiten, </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>npm install less less-loader --save</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p><strong>Der zweite Schritt: </strong></p> <p>Ä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 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>{ test: /\.less$/, loader: "style-loader!css-loader!less-loader", },</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> zum Originalcode hinzu</p> <p><strong>Schritt 3: </strong>Verwenden Sie less</p> <p>Fügen Sie bei der Verwendung lang="less" in das Style-Tag ein und Sie können schreiben weniger im Inneren Der Code </p> <p>Fügen Sie einen Bereich zum Style-Tag hinzu, damit er nur in diesem Bereich gültig ist</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><style lang="less" scoped> 或者@import './index.less'; //引入全局less文件Nach dem Login kopieren Verwandte Empfehlungen: „vue.js Tutorial“
