CSS Academy · درس

PostCSS في Vite وWebpack

ادمج PostCSS في مسارات البناء الحديثة باستخدام إعدادات Vite ومحملات webpack.

PostCSS في Vite وWebpack درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

PostCSS في Vite

يوفّر Vite دعمًا مضمّنًا لـ PostCSS. أنشئ ملف postcss.config.js في جذر المشروع، وسيطبّقه Vite تلقائيًا على جميع ملفات CSS أثناء التطوير والبناء.

// postcss.config.js
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';

export default {
  plugins: [
    autoprefixer,
    process.env.NODE_ENV === 'production' ? cssnano({ preset: 'default' }) : false
  ].filter(Boolean)
};

خيارات CSS في Vite

بدلًا من ذلك، اضبط PostCSS مضمّنًا في vite.config.js:

// vite.config.js
import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';

export default defineConfig({
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  }
});

PostCSS في webpack

يستخدم webpack postcss-loader ضمن سلسلة قواعد الوحدات. ضع هذا المحمّل دائمًا بعد css-loader وقبل أي تحويلات CSS أخرى:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['autoprefixer']
              }
            }
          }
        ]
      }
    ]
  }
};

‏postcss-loader مع ملف إعداد

وجّه postcss-loader إلى ملف إعداد خارجي:

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      config: './postcss.config.js'
    }
  }
}

PostCSS مع Sass في Vite

يعالج Vite Sass أولًا، ثم PostCSS. ثبّت sass وإضافات postcss، وسيتولى Vite إدارة المسار تلقائيًا:

npm install --save-dev sass autoprefixer cssnano

postcss-preset-env

يحوّل postcss-preset-env CSS الحديث، مثل التداخل والوسائط المخصّصة وغير ذلك، إلى CSS متوافق مع المتصفحات — وهو شبيه بـ Babel بالنسبة إلى JavaScript. اضبط المرحلة المستهدفة:

plugins: [
  require('postcss-preset-env')({
    stage: 3, // use stage 3+ features
    features: { 'nesting-rules': true }
  })
]

CSS Modules مع PostCSS

تتكامل CSS Modules، أي أسماء الأصناف المقيّدة بنطاق، مع PostCSS في كل من Vite وwebpack. إذ تعالج CSS من خلال PostCSS قبل تطبيق تقييد نطاق الوحدات.

// vite.config.js
export default {
  css: {
    modules: { localsConvention: 'camelCase' },
    postcss: { plugins: [autoprefixer()] }
  }
}

التحقق من تطبيق PostCSS

في أدوات المطوّرين في Vite، اعرض خرائط مصدر CSS المحوّلة. وستظهر الخصائص ذات البادئات التي أضافها autoprefixer في الناتج المترجم. شغّل vite build وافحص dist/assets/*.css للتحقق من تصغير cssnano.

LightningCSS كبديل

يدعم Vite الآن lightningcss كبديل أسرع لـ PostCSS. إذ يتولى إضافة البادئات والتداخل والتصغير في مرحلة واحدة باستخدام Rust:

export default {
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%'))
    }
  }
}

تحسين بناء الإنتاج

فعّل cssnano، أو تصغير lightningcss، في عمليات بناء الإنتاج فقط. أما عمليات بناء التطوير فينبغي أن تنتج CSS مقروءًا ومرفقًا بخرائط مصدر لتسهيل تصحيح الأخطاء.

تحقق سريع

أين تحدث معالجة PostCSS في سلسلة محمّلات CSS الخاصة بـ webpack؟

مراجعة

يوفّر Vite دعمًا مضمّنًا لـ PostCSS من خلال postcss.config.js. ويستخدم webpack postcss-loader بعد css-loader. استخدم postcss-preset-env لتوفير بدائل توافقية لميزات CSS الحديثة. فعّل cssnano في عمليات بناء الإنتاج فقط. وفكّر في استخدام lightningcss لتسريع عمليات بناء Vite. وأنشئ دائمًا خرائط مصدر لتصحيح أخطاء CSS المحوّل.

الأسئلة الشائعة

هل درس «PostCSS في Vite وWebpack» مجاني؟

نعم — نص درس «PostCSS في Vite وWebpack» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «PostCSS في Vite وWebpack»؟

ادمج PostCSS في مسارات البناء الحديثة باستخدام إعدادات Vite ومحملات webpack. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «PostCSS في Vite وWebpack»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy