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.

Emballage de fichiers CSS

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.

Remarque : tous les chargeurs doivent être installés séparément dans npm et configurés dans webpack.config.js. Passons brièvement en revue les types de configuration des chargeurs.

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-loader

Une 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!