Maison > Article > interface Web > 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.
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
"server": "webpack-dev-server –open",
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!