0Pricing
CSS Academy · 课时

Vite 与 Webpack 中的 PostCSS

使用 Vite 配置和 webpack 加载器，将 PostCSS 集成到现代构建流程中。

Vite 与 Webpack 中的 PostCSS 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

Vite 中的 PostCSS

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)
};

Vite CSS 选项

或者，也可以在 vite.config.js 中内联配置 PostCSS：

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

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

webpack 中的 PostCSS

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'
    }
  }
}

Vite 中的 PostCSS 与 Sass

Vite 会先处理 Sass，再处理 PostCSS。请安装 sass 和 PostCSS 插件，Vite 会自动处理整个流水线：

npm install --save-dev sass autoprefixer cssnano

postcss-preset-env

postcss-preset-env 会将现代 CSS（嵌套、自定义媒体查询等）转换为兼容浏览器的 CSS，其作用类似于 JavaScript 的 Babel。配置目标阶段：

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

使用 PostCSS 的 CSS Modules

CSS Modules（作用域内的类名）可以与 Vite 和 webpack 中的 PostCSS 集成。它们会先通过 PostCSS 处理 CSS，然后再应用模块作用域。

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

检查 PostCSS 是否已应用

在 Vite DevTools 中查看转换后的 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，以便更轻松地调试。

快速检查

在 webpack CSS 加载器链中，PostCSS 处理发生在哪里？

回顾

Vite 通过 postcss.config.js 内置支持 PostCSS。webpack 会在 css-loader 之后使用 postcss-loader。使用 postcss-preset-env 为现代 CSS 提供兼容处理。仅在生产构建中启用 cssnano。若要获得更快的 Vite 构建，可以考虑使用 lightningcss。请始终生成源代码映射，以便调试转换后的 CSS。

常见问题解答

「Vite 与 Webpack 中的 PostCSS」课时是免费的吗？

是的 — 「Vite 与 Webpack 中的 PostCSS」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「Vite 与 Webpack 中的 PostCSS」这节课中我会学到什么？

使用 Vite 配置和 webpack 加载器，将 PostCSS 集成到现代构建流程中。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「Vite 与 Webpack 中的 PostCSS」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. PostCSS 的作用与工作原理
  2. Autoprefixer 与 cssnano
  3. 自定义 PostCSS 插件
  4. Vite 与 Webpack 中的 PostCSS
← 返回 CSS Academy