Wie kann man weniger verpacken und trennen? Einführung in Methoden zum Verpacken und Trennen weniger

In diesem Artikel erfahren Sie, wie Sie weniger einpacken und trennen können. Die Einführung in die Methoden des Verpackens und Trennens von weniger hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

Verpacken und Trennen von weniger

1. Installieren Sie den Less-Loader zum Verpacken und Verwenden

npm install –save-dev less

3.

npm install –save-dev less-loader

4. Fügen Sie

{   test: /\.less$/,
   use: [{
          loader: "style-loader" // creates style nodes from JS strings       }, {           loader: "css-loader" // translates CSS into CommonJS
       , {
           loader: "less-loader" // compiles Less to CSS       }]
}

in src/index.html ein. 5. Schreiben Sie eine black.less-Datei in das Verzeichnis src/css/

<p id="lessLearn"></p>
<p><img src="./images/10.jpg"/></p>
<p id="pic"></p>
<p id="title"></p>

6. Fügen Sie in src less

@base:#000;#lessLearn{    width:300px;
    height:200px;
    background-color:@base;}

in /entry.js ein. 7. Löschen Sie das dist-Verzeichnis und geben Sie webpack zum Verpacken ein. Überprüfen Sie nach erfolgreicher Verpackung, ob in dist/css/index.css kein #lessLearn-Stil vorhanden ist (==in js verpackt ==)

8. npm run server run result

Sie können –open zum Server im Skript in package.json und im Browser hinzufügen öffnet die Seite von selbst

„server“: „webpack-dev-server –open“,

9 Wenn Sie js und less im Eintrag trennen möchten, müssen Sie die Verwendung von less-Konfiguration unter dem Modul in webpack-config ändern .js. Ändern Sie

import less from ‘./css/black.less’

wie folgt:

10. Löschen Sie den dist-Ordner, verpacken Sie ihn mit webpack, und Sie sehen die Stildefinition von less in dist/css/index.css ( d. h. getrenntes CSS und JS)

11. npm run build Führen Sie den Browser aus

Verwandte Empfehlungen:

Wie verweise ich auf Bilder in CSS? Wie referenziere ich Bilder in CSS

Wie packe ich CSS-Dateien? So packen Sie CSS-Dateien

Das obige ist der detaillierte Inhalt vonWie kann man weniger verpacken und trennen? Einführung in Methoden zum Verpacken und Trennen weniger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!