Comment utiliser le préprocesseur CSS

Le préprocesseur n'a pas été sélectionné lors de la création du projet et le chargeur correspondant doit être installé manuellement. Les méthodes sont les suivantes : 1. Sass, "sass-loader node-sass" ; 2. Less, "less-loader less" ; 3. Stylus, "stylus-loader stylus".

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Préprocesseur CSS

1. Qu'est-ce que le préprocesseur CSS

Le préprocesseur CSS est un langage de programmation spécialisé utilisé pour ajouter certaines fonctionnalités de programmation au CSS (le CSS lui-même n'est pas un langage de programmation).

Il n'est pas nécessaire de prendre en compte les problèmes de compatibilité du navigateur, car le préprocesseur CSS compile et génère en fin de compte les styles CSS standard.

Vous pouvez utiliser des compétences de base en programmation telles que des variables, des jugements logiques simples et des fonctions dans le préprocesseur CSS.

2. Plusieurs préprocesseurs CSS couramment utilisés

• sass

• less

• stylet

3. projet Préprocesseur (Sass/Less/Stylus), vous devez installer manuellement le chargeur correspondant

# Sass

npm install -D sass-loader node-sass

# Less

npm install -D less-loader less

# Stylus

npm install -D stylus-loader stylus

Exemple : App.vue est modifié en Sass

$color: #42b983;
a {
color: $color;
}

4. styles

Pour importer automatiquement des fichiers de style (pour les couleurs, les variables, les mixins, etc.), vous pouvez utiliser style-resources-loader.

npm i -D style-resources-loader

Configuration

const path = require('path')
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [            ,
path.resolve(__dirname, './src/styles/imports.scss'),
],
})
}
module.exports = {
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
},
}

Apprentissage recommandé :

Tutoriel vidéo 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!