Perakitan beberapa file CSS menjadi satu – Beragampengetahuan

Misi Stu Robson adalah untuk “membuka kunci” CSS -nya. Saya melihat artikel seperti ini muncul setiap tahun, dan ada alasan bagus untuk ini, karena CSS telah tumbuh banyak kaki baru dalam beberapa tahun terakhir. Sedemikian rupa sehingga sekarang dapat mendorong Anda untuk menjangkau banyak fitur inti yang sekarang telah dipanggang langsung ke CSS. Bahkan, kami memiliki artikel yang diterbitkan oleh Jeff Bridgforth minggu depan.

Yang saya sukai dari Stu’s Stab adalah bahwa ini adalah perjalanan yang berkelanjutan, bukan saklar grosir. Bahkan, ia memiliki posting baru yang secara khusus ditujukan untuk menyusun beberapa file CSS ke dalam satu file. Membagi gaya menjadi file yang terpisah jelas merupakan alasan mengapa saya terus melakukan pekerjaan saya. Saya suka dapat menemukan apa yang saya butuhkan dalam file tertentu tanpa harus menggali aturan gaya keseluruhan.

Tetapi apakah ini alasan sebenarnya untuk terus menggunakan Sass? Sejujurnya, saya tidak pernah mempertanyakannya, mungkin itu karena otak kadal tidak peduli, selama sesuatu terus bekerja. Oh, apakah saya ingin file gaya parsial? Selalu lakukan ini dengan toolchain biadab yang belum mengecewakan saya. Saya tahu, ini bukan jalan yang paling positif.

Ketika Anda tidak mengandalkan Sass, Stu menguraikan dua cara untuk mengkompilasi beberapa file CSS:

Menggunakan postcss

Ah, ya, kami bisa Dan Tidak ada kerumitan. Sangat mudah untuk melupakan bahwa kantor pos dan SAS kompatibel tetapi tidak saling bergantung.

postcss main.css -o output.css

Stu menjelaskan mengapa ini mungkin cara yang baik untuk memiringkan pekerjaan Anda:

PostCSS dapat diintegrasikan dengan mulus dengan alat -alat build populer seperti Webpack, Gulp, dan Crolup, memungkinkan Anda untuk memasukkan kompilasi CSS ke dalam alur kerja pengembangan yang ada tanpa perlu potensi sakit kepala konfigurasi tambahan.

Skrip khusus untuk kompilasi

Hal pamungkas adalah menghilangkan kebutuhan akan ketergantungan apa pun. Stu memiliki skrip node.js khusus:

const fs = require('fs');
const path = require('path');
// Function to read and compile CSS
function compileCSS(inputFile, outputFile) 
    const cssContent = fs.readFileSync(inputFile, 'utf-8');
    const imports = cssContent.match(/@import\s+['"]([^'"]+)['"]/g) 
// Usage
const inputCSSFile="index.css"; // Your main CSS file
const outputCSSFile="output.css"; // Output file
compileCSS(inputCSSFile, outputCSSFile);

Bukan 100% tanpa ketergantungan, tetapi ya ampun, yang merupakan cara yang bagus untuk mengurangi overhead dan masih menggabungkan file:

node compile-css.js

Metode ini dirancang untuk direktori file datar. Jika Anda menyukai saya, seperti subfolder bersarang:

Menggunakan struktur file datar dan strategi impor lapisan tunggal yang saya adopsi, impor bersarang (Anda dapat menanganinya). postcss-import Tidak perlu untuk pengaturan proyek saya dan proses perakitan dapat disederhanakan sambil mempertahankan organisasi yang bersih.

Sangat keren, terima kasih Stu! Dan periksa posting lengkapnya karena ada banyak konteks yang berguna di balik ini, terutama dalam skrip khusus.

Tautan langsung →