একের মধ্যে একাধিক সিএসএস ফাইল সংকলন

স্টু রবসন একটি মিশনে আছে “আন-সাস” তার সিএসএস। আমি প্রতি বছর এই পপ আপের মতো নিবন্ধগুলি দেখতে পাচ্ছি এবং সাম্প্রতিক বছরগুলিতে সিএসএস যেমন অনেকগুলি নতুন পা বাড়িয়েছে ঠিক তেমন কারণেই। এত বেশি যে মূল বৈশিষ্ট্যগুলির অনেকগুলি যা আপনাকে অতীতে সাসের কাছে পৌঁছানোর জন্য উত্সাহিত করেছিল তা এখন সরাসরি সিএসএসে বেক করা হয়েছে। আসলে, আমাদের আছে জেফ ব্রিজফোর্থ পরের সপ্তাহে একটি সম্পর্কিত নিবন্ধ সহ আলতো চাপুন।

এটিতে স্টুর ছুরিকাঘাতের বিষয়ে আমি যা পছন্দ করি তা হ’ল এটি পাইকারি স্যুইচের চেয়ে চলমান যাত্রা। আসলে, তিনি একটি নতুন পোস্ট নিয়ে বাইরে আছেন একক ফাইলে একাধিক সিএসএস ফাইল সংকলন করার সময় বিশেষভাবে পোকে। পৃথক ফাইলগুলিতে স্টাইলগুলি বিভক্ত করা এবং সংগঠিত করা অবশ্যই আমি আমার কাজটি সাস-ইফাই করা অবিরত কারণ। আমি একটি নির্দিষ্ট ফাইলে আমার যা প্রয়োজন ঠিক তা খুঁজে পেতে সক্ষম হতে এবং স্টাইলের নিয়মের একচেটিয়া খনন না করে এটি আপডেট করতে সক্ষম হতে পছন্দ করি।

তবে কি সাস ব্যবহার চালিয়ে যাওয়ার আসল কারণ? আমি সত্যই কখনও এটিকে প্রশ্নবিদ্ধ করি নি, সম্ভবত কোনও টিকটিকি মস্তিষ্কের কারণে যা যতক্ষণ কাজ চালিয়ে যায় ততক্ষণ যত্ন করে না। ওহ, আমি পার্টিয়ালাইজড স্টাইল ফাইল চাই? সর্বদা এটি সাস-ওয়াই টুলচেইনের সাহায্যে সম্পন্ন করে যা আমাকে এখনও হতাশ করে না। আমি জানি, সবচেয়ে সক্রিয় পথ নয়।

আপনি যখন সাসের উপর নির্ভর করছেন না তখন স্টু একাধিক সিএসএস ফাইল সংকলনের দুটি উপায়ের রূপরেখা দেয়:

পোস্টসিএসএস ব্যবহার করে

আহ, এটা ঠিক, আমরা ব্যবহার করতে পারি পোস্টসিএসএস উভয়ের সাথে এবং সাস ছাড়া। এটি ভুলে যাওয়া সহজ যে পোস্টসিএসএস এবং সাস সামঞ্জস্যপূর্ণ, তবে একে অপরের উপর নির্ভরশীল নয়।

postcss main.css -o output.css

স্টু ব্যাখ্যা করেছেন যে কেন এটি আপনার কাজকে অ-সাস’সিংয়ে টো-ডিপ করার একটি দুর্দান্ত উপায় হতে পারে:

পোস্টসিএসএসগুলি ওয়েবপ্যাক, গুল্প এবং রোলআপের মতো জনপ্রিয় বিল্ড সরঞ্জামগুলির সাথে নির্বিঘ্নে সংহত করতে পারে, আপনাকে আপনার বিদ্যমান বিকাশের কর্মপ্রবাহে সম্ভাব্য, অতিরিক্ত কনফিগারেশন মাথাব্যথা ছাড়াই সিএসএস সংকলন অন্তর্ভুক্ত করার অনুমতি দেয়।

সংকলনের জন্য কাস্টম স্ক্রিপ্ট

চূড়ান্ত জিনিসটি কোনও নির্ভরতার প্রয়োজনীয়তা দূর করে। স্টুতে এর জন্য একটি কাস্টম নোড.জেএস স্ক্রিপ্ট রয়েছে:

const fs = require('fs');
const path = require('path');
// Function to read and compile CSS
function compileCSS(inputFile, outputFile)  ();
    let compiledCSS = '';
    // Read and append each imported CSS file
    imports.forEach(importStatement => 
        const filePath = importStatement.match(/('")((^'")+)('")/)(1);
        const fullPath = path.resolve(path.dirname(inputFile), filePath);
        compiledCSS += fs.readFileSync(fullPath, 'utf-8') + '\n';
    );
    // Write the compiled CSS to the output file
    fs.writeFileSync(outputFile, compiledCSS.trim());
    console.log(`Compiled CSS written to $outputFile`);

// Usage
const inputCSSFile="index.css"; // Your main CSS file
const outputCSSFile="output.css"; // Output file
compileCSS(inputCSSFile, outputCSSFile);

নির্ভরতা থেকে মুক্ত 100% নয়, তবে গীজ, ওভারহেড হ্রাস করার এবং এখনও ফাইলগুলি একত্রিত করার কী দুর্দান্ত উপায়:

node compile-css.js

এই পদ্ধতির একটি ফ্ল্যাট ফাইল ডিরেক্টরি জন্য ডিজাইন করা হয়েছে। আপনি যদি আমার মতো হন এবং নেস্টেড সাবফোল্ডারগুলি পছন্দ করেন:

ফ্ল্যাট ফাইল কাঠামো এবং আমি নিযুক্ত একক স্তরের আমদানি কৌশল সহ, নেস্টেড আমদানি (আপনি দিয়ে করতে পারেন postcss-import আমার প্রকল্প সেটআপের জন্য প্রয়োজনীয় নয়, পরিষ্কার সংস্থা রক্ষণাবেক্ষণের সময় সংকলন প্রক্রিয়াটি সহজ করে।

খুব শীতল, ধন্যবাদ স্টু! এবং চেক আউট সম্পূর্ণ পোস্ট কারণ এর পিছনে অনেক সহায়ক প্রসঙ্গ রয়েছে, বিশেষত কাস্টম স্ক্রিপ্ট সহ।

সরাসরি লিঙ্ক →