۴ علیرضا نقویان
ماژولار کردن فایل‌های css
جامعه Html & CSS ایجاد شده در ۰۱ شهریور ۱۴۰۲

سلام ....

تو این قسمت ما فایل‌های SCSSرا ماژولار کردیم ....

میخواستم بدونم امکانش هست که کاری کنیم کد‌های کامپایل شده همگی با هم داخل main.css نروند؟؟؟

یعنی وقتی کد‌ها کامپایل میشن، کد‌های داخل پوشه src/css هم خودکار به صورت ماژولار قرار بگیره (فایل هایی مثل :header.css و... داخل main.css به صورت خودکار import بشن.).

میخواستم بدونم میشه با gulp تسکی نوشت که این کارو انجام بده ...

ممنون میشم پاسخ بدید.

ممنون که بعد از چند روز هنوز پاسخی از طرف شما ارسال نشده.....

علیرضا نقویان ۰۳ شهریور ۱۴۰۲، ۱۶:۱۳

فایل‌های ماژولار scss که با پیشوند _ شروع میشوند نباید بصورت مجزا کامپایل شوند چون فایل‌ها باهم ارتباط دارند، مثل فایل‌های variables، برای کامپایل این فایل‌ها بصورت ماژولار باید _ را از ابتدای نام این فایل‌ها حذف کرد. ضمناً در حین کامپایل با خطایی مثل undefined بودن یک سری متغیر روبرو میشوید که یک راهش اینه برای حل این موضوع، تمام ماژول‌های scss را به ابتداشون فایل مربوط به variables رو import کنید.

کدهای زیر به این شکل عمل میکنند که compile-modules تمامی ماژول‌های scss از مسیر src/scss/_*.scss را در مسیر dist/css/modules (بصورت دستی ایجاد کنید) به فایل‌های css همنام (بدون _) کامپایل میکند.


تسک بعدی generate-style فایل style.css را در مسیر dist/css/style.css ایجاد میکند.

برای اجرای تسک های، کامند gulp را تایپ کنید.

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const rename = require('gulp-rename');
/* *********** */
gulp.task('compile-modules', function() {
    return gulp.src('src/scss/_*.scss') 
        .pipe(rename(function(path) {
            path.basename = path.basename.slice(1);
        }))
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('dist/css/modules'));
});
/* *********** */
const fs = require('fs');
gulp.task('generate-style', function(done) {
    fs.readdir('dist/css/modules', (err, files) => {
        if (err) {
            console.error(err);
            done();
            return;
        }
        const cssImports = files.map(file => `@import "${file}";`).join('\\n');
        fs.writeFile('dist/css/style.css', cssImports, err => {
            if (err) {
                console.error(err);
            }
            done();
        });
    });
});
/* *********** */
gulp.task('default', gulp.series('compile-modules', 'generate-style'));
محسن موحد ۰۳ شهریور ۱۴۰۲، ۱۹:۲۴

ممنون از راهنمایی..

یه نکته دیگه هستش که میخواستم بدونم توی پروژه نهایی واقعی آیا نیاز هستش که فایل css هم به صورت ماژولار باشه (از نظر تمیزی کد میگم)؟

یا نه چون که روی سرور آپلود میشه برای سرعت بیشتر باید حتما همه کدهای scss داخل یک فایل css کامپایل بشن؟؟


علیرضا نقویان ۰۴ شهریور ۱۴۰۲، ۱۱:۳۹

ماژولاری بیشتر در بحث توسعه بیشتر برای ما مهمه تا production و برای یک سری مواردی که اهمیت بیشتری دارن مثل سرعت لود باید و بحث فشرده سازی و کاهش request‌ها بعضی از موارد به ناچار نقض میشن و موارد مهمتری مد نظر قرار می‌گیره

بهترین پاسخ
وحید صالحی ۰۴ شهریور ۱۴۰۲، ۱۱:۵۰