Préface : Le traitement des CSS par Webpack est un sujet très basique. C'est juste que dans webpack4, lors de l'utilisation du préfixe automatique pour résoudre la compatibilité du navigateur CSS, il y aura un piège différent d'avant. Je vais donc écrire sur ces connaissances en détail.
1. Dépendances requises
- style-loader : Injectez des fichiers CSS dans la balise de style de la page html. Référence : https://www.webpackjs.com/loa...
- css-loader : analyse les fichiers CSS importés dans js. Référence : https://www.webpackjs.com/loa...
- less-loader : analyse le langage de prétraitement CSS Si vous utilisez d'autres langages de prétraitement, vous devez utiliser le chargeur correspondant. Référence : https://www.html.cn/doc/webpa...
-
postcss-loader : Post-traitez le CSS que nous avons écrit dans le projet :
- Analysez le CSS dans une abstraction qui peut être exploitée par Structure arborescente de syntaxe JavaScript (Abstract Syntax Tree, AST),
- Appelez le plug-in pour traiter l'AST et obtenir le résultat.
- autoprefixer : Un plug-in pour postcss-loader qui préfixe css pour s'adapter aux différents navigateurs.
Remarque : postcss-loader fonctionne comme un processus de post-production cinématographique et télévisuelle. Il combine tous les fichiers originaux, puis utilise des plug-ins pour ajouter des effets spéciaux et génère enfin le produit fini. Le plug-in de préfixe automatique effectue un post-traitement sur l'AST analysé par postcss-loader.
Deuxièmement, installez les dépendances
npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer
Trois, créez moins de fichier de test style.less
#world{
display: flex;
}
Quatre, importez style.less dans le fichier principal index.js
import './style.less';
Cinq, fichier de configuration du webpack webpack.config.js
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
{loader: 'css-loader', options: { importLoaders: 1 } },
'less-loader',
'postcss-loader'
]
},
]
}
importLoaders: 1 de css-loader est un paramètre très important. Cela entraînera l’injection de tous les CSS analysés dans une seule balise de style. Sans cette configuration, une nouvelle balise de style sera créée à chaque nouveau fichier CSS injecté. Certains navigateurs ont une limite sur le nombre de balises de style.
Sixièmement, créez le fichier de configuration postcss postcss.config.js et introduisez-y le plug-in de préfixe automatique
module.exports = {
plugins: [
require('autoprefixer')
]
}
Septièmement, ajoutez la liste des navigateurs dans package.json. C'est l'écueil mentionné dans la préface, sinon l'autopréfixe ne fonctionnera pas
{
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --mode development"
},
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
}
Huit, exécutez la commande
npm run build
Neuf, l'analyse css est réussie, l'effet est le suivant :
#world {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}