ViteとWebpackでのPostCSS
Viteの設定とwebpackローダーを使い、PostCSSを最新のビルドパイプラインに統合します。
「ViteとWebpackでのPostCSS」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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 cssnanopostcss-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 と統合できます。モジュールのスコープを適用する前に、CSS が PostCSS を通じて処理されます。
// 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 は現在、PostCSS より高速な代替手段として lightningcss をサポートしています。1 回の 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 を使用します。最新 CSS のポリフィルには postcss-preset-env を使用してください。cssnano は本番ビルドでのみ有効にします。Vite のビルドを高速化するには lightningcss も検討してください。変換された CSS をデバッグできるよう、必ずソースマップを生成してください。
AI チューターと学ぶ CSS — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「ViteとWebpackでのPostCSS」レッスンは無料ですか？
はい。「ViteとWebpackでのPostCSS」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「ViteとWebpackでのPostCSS」で何を学びますか？
Viteの設定とwebpackローダーを使い、PostCSSを最新のビルドパイプラインに統合します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「ViteとWebpackでのPostCSS」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- PostCSSの役割と仕組み
- Autoprefixerとcssnano
- カスタムPostCSSプラグイン
- ViteとWebpackでのPostCSS