Comment emballer et séparer moins ? Introduction aux méthodes de conditionnement et de séparation moins

Cet article vous apporte des informations sur comment emballer et séparer moins ? L'introduction aux méthodes d'emballage et de séparation a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.

Emballage et séparation less

1. Installez less service

npm install –save-dev less

2. Installez less-loader pour emballer et utiliser

npm install –save-dev less-loader

3. . Configurez le chargeur :

{   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       }]
}

4. Insérez

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

dans src/index.html 5. Écrivez un fichier black.less dans le répertoire src/css/ <. 🎜>

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

6. Introduisez less dans src/entry.js

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

7. Supprimez le répertoire dist et entrez webpack pour l'empaquetage. Une fois l'empaquetage réussi, vérifiez l'intérieur de dist. /css/index.css Il n'y a pas de style #lessLearn (==emballé dans js==)

8 Le résultat du serveur d'exécution npm

peut être ajouté au serveur. dans le script de package.json –open, le navigateur ouvrira la page tout seul

"server": "webpack-dev-server –open",

9. Si vous souhaitez séparer js et less dans l'entrée, vous devez modifier l'utilisation de less configuration sous le module dans webpack-config. .js. Modifiez

use:extractTextPlugin.extract({    use:[{
      loader:'css-loader'
    },{      loader:'less-loader'
    }],    fallback:'style-loader'
  })

comme suit :

10. Supprimez le dossier dist et emballez-le avec webpack Vous verrez la définition de style de less dans dist/css/index.css. (c'est-à-dire combiner la séparation CSS et JS)

11. npm run build Exécuter le navigateur

Recommandations associées :

Comment référencer des images en CSS ? Comment référencer des images en CSS

Comment packager des fichiers CSS ? Comment empaqueter des fichiers CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!