0Pricing
CSS Academy · บทเรียน

PostCSS ใน Vite และ Webpack

ผสาน PostCSS เข้ากับกระบวนการสร้างสมัยใหม่ด้วยการกำหนดค่า Vite และตัวโหลดของ webpack

PostCSS ใน Vite และ Webpack เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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 กับ PostCSS

มอดูล CSS (ชื่อคลาสที่จำกัดขอบเขต) ทำงานร่วมกับ PostCSS ได้ทั้งใน Vite และ webpack โดยจะประมวลผล CSS ผ่าน PostCSS ก่อนใช้การจำกัดขอบเขตของมอดูล

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

การตรวจสอบว่า PostCSS ถูกนำไปใช้

ใน DevTools ของ 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” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “PostCSS ใน Vite และ Webpack”

ผสาน PostCSS เข้ากับกระบวนการสร้างสมัยใหม่ด้วยการกำหนดค่า Vite และตัวโหลดของ webpack คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “PostCSS ใน Vite และ Webpack” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. PostCSS ทำอะไรและทำงานอย่างไร
  2. Autoprefixer และ cssnano
  3. ปลั๊กอิน PostCSS แบบกำหนดเอง
  4. PostCSS ใน Vite และ Webpack
← กลับไปที่ CSS Academy