Cara menggunakan css preprocessor

Tiada prapemproses dipilih semasa membuat projek, dan pemuat yang sepadan perlu dipasang secara manual. Kaedahnya ialah: 1. Sass, "sass-loader node-sass"; 2. Kurang, "less-loader less";

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Prapemproses CSS

1 Apakah prapemproses css

Prapemproses CSS ialah bahasa pengaturcaraan khusus yang digunakan untuk menambah beberapa ciri pengaturcaraan pada CSS (CSS itu sendiri bukan bahasa pengaturcaraan) .

Tidak perlu mempertimbangkan isu keserasian penyemak imbas, kerana prapemproses CSS akhirnya menyusun dan mengeluarkan gaya CSS standard.

Anda boleh menggunakan kemahiran pengaturcaraan asas seperti pembolehubah, pertimbangan logik mudah dan fungsi dalam prapemproses CSS.

2. Beberapa prapemproses css yang biasa digunakan

• sass

• kurang

• stylus

3 Cara menggunakan prapemproses css

Jika prapemproses yang diperlukan (Sass/Less/Stylus) tidak dipilih semasa membuat projek , anda perlu pasang secara manual pemuat yang sepadan

# Sass

npm install -D sass-loader node-sass

# Kurang

npm install -D less-loader less

# Stylus

npm install -D stylus-loader stylus

Contoh: App diubah suai kepada Sass

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

4 secara automatik mengimport gaya

untuk mengimport fail gaya secara automatik (untuk warna, pembolehubah, campuran, dll.), anda boleh menggunakan style-resources-loader.

npm i -D style-resources-loader

Konfigurasi

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)))
},
}

Pembelajaran yang disyorkan: tutorial video css

Atas ialah kandungan terperinci Cara menggunakan css preprocessor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!