Maison > Article > interface Web > Comment empaqueter des fichiers CSS ? Comment empaqueter des fichiers CSS
Le contenu de cet article explique comment empaqueter des fichiers CSS ? La méthode d'empaquetage des fichiers CSS 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.
Les chargeurs sont l'une des fonctions les plus importantes de Webpack. Différents chargeurs peuvent être utilisés pour traiter spécifiquement différents formats de fichiers
Chargeurs. sont dans le module module
Voici quelques exemples d'utilisation des Loaders :
Vous pouvez convertir l'écriture de fichiers SASS en CSS sans utiliser d'autres outils de conversion. .
Peut convertir le code ES6 ou ES7 en code JS compatible avec la plupart des navigateurs.
peut convertir JSX dans React en code JavaScript.
test : une expression utilisée pour correspondre à l'extension du fichier traité. Cette option doit être configurée
use : nom du chargeur, qui est le nom du module que vous souhaitez utiliser. option également La configuration doit être effectuée, sinon une erreur sera signalée ;
inclure/exclure : ajouter manuellement les fichiers (dossiers) qui doivent être traités ou bloquer les fichiers (dossiers) qui n'ont pas besoin d'être traités (facultatif ); >requête : fournir des informations supplémentaires pour les chargeurs. Définir les options (facultatif)
Fichier CSS du package
Créez un dossier CSS dans le répertoire src et créez le fichier index.css
dans le dossier ./src/css/index.css
body{ background-color: red; color: white; }
Une fois le fichier CSS créé, dont vous avez besoin. Il ne peut être empaqueté qu'après avoir été introduit dans le fichier d'entrée. Ici, nous l'introduisons dans Entry.js. Ajoutez le code dans la première ligne de /src/entery.js :
import css from './css/index.css';
Une fois le CSS et l'importation terminés, nous devons utiliser le chargeur pour analyser les fichiers CSS, à savoir style-loader et css-loader.
style-loader : Il est utilisé pour traiter l'url() dans les fichiers CSS, etc. L'URL dans npm : https:/ / /www.npmjs.com/package/style-loader
Utilisez npm install pour installer le projet : Soyez prudent lors de l'installation de style-loader et css-loader, leurs codes sont différents
npm install style-loader –save-dev
css-loader : Il est utilisé pour insérer du CSS dans le balise de style de page. URL dans npm : https://www.npmjs.com/package/css-loader
Utilisez npm install pour installer le projet :
npm install –save-dev css-loaderUne fois les deux chargeurs téléchargés et installés, nous pouvons configurer nos chargeurs.
Configuration des chargeurs : webpack.config.js
module:{ rules: [{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }] },
Il existe trois façons d'écrire le module 1. utilisez : [ 'style-loader', 'css-loader'
2.loader:['style-loader','css-loader']
3. :
use:[{ loader:'style-loader'},{ loader:'css-loader'}]Emballez les fichiers js et css sur le site Web
Parfois, le fichier de ressources est introuvable une fois l'image de référence CSS empaquetée
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!