PostCSS

PostCSS を使用すると、開発者は後方互換性を維持し、パフォーマンスを向上させながら、最新の CSS を記述できます。CSS コードを解析し、一連のプラグインを介して渡します。これらのプラグインは、最終結果を出力する前に CSS を変更、最適化、および拡張できます。

使い方

次の Qwik スタータースクリプトを使用して、PostCSS をプロジェクトに追加できます。

npm run qwik add postcss

これにより、次の依存関係と構成で、プロジェクトのルートに新しい postcss.config.js ファイルが作成されます。

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-preset-env": {
      stage: 3,
      features: {
        "nesting-rules": true,
      },
    },
  },
}

CssNano のような新しいプラグインを追加したい場合は、次のコマンドを実行して postcss.config.js を更新してください。

npm install cssnano --save-dev

postcss.config.js

module.exports = {
  plugins: {
    /* previous plugin configuration */
    "cssnano": {
      preset: "default"
    }
  },
}

詳細については、PostCSS ドキュメントをご確認ください。

貢献者

このドキュメントの改善にご協力いただいたすべての貢献者に感謝します!