プリセット

プリセットとは何ですか？

バージョン4以降、プリセットは、ユースケースに応じてcssnanoに異なる機能を読み込む方法です。今すぐ、高度な変換をオプトアウトするのではなく、代わりにオプトインすることを選択できます。プリセットが導入される前は、高度な変換を実行するコードは、使用されているかどうかに関係なくnpmからダウンロードされました。プリセットにより、これがもはや問題ではなくなり、複数のコンテキストに再利用するためにcssnanoの設定を保存する機能も提供されます。

プリセットはどのように機能しますか？

cssnanoは、使用するプリセットを確認するためにいくつかの異なる操作を実行します。まず、初期化時にプリセットを使用してロードされたこと確認します。そうであれば、それを使用します。たとえば、プロジェクトルートでpostcss.config.jsを使用する場合。

module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
        }),
    ],
};

プリセット名は、解決可能なノードモジュールを指し、オプションでcssnano-preset-プレフィックスを使用します。必要に応じて、ここでcssnano-preset-defaultを指定できます。

プリセットにオプションを渡す必要がある場合は、代わりに配列構文を使用して指定する必要があります。たとえば、次の構成を使用してすべてのコメントを削除できます。

module.exports = {
    plugins: [
        require('cssnano')({
            preset: ['default', {
                discardComments: {
                    removeAll: true,
                },
            }]
        }),
    ],
};

プリセットが明示的に設定されていない他のケースでは、cssnanoはホームディレクトリに到達するまで、現在の作業ディレクトリから上にpackage.jsonまたはcssnano.config.jsのセクションを検索します。次の2つの構成例は、上記と同様に機能します。

{
  "name": "awesome-application",
  "cssnano": {
    "preset": [
      "default",
      {"discardComments": {"removeAll": true}}
    ]
  }
}

およびcssnano.config.js

const defaultPreset = require('cssnano-preset-default');

module.exports = defaultPreset({
    discardComments: {
        removeAll: true,
    },
});

cssnano.config.jsは、より具体的なユースケースのために関数を変数として受け入れられる変換を利用する場合に役立ちます。

cssnanoが明示的にプリセットを使用してロードされなかった場合、または親ディレクトリに設定セクション/ファイルが見つからなかった場合、デフォルトがロードされます。postcss.config.jsの例は以下の通りです。

module.exports = {
    plugins: [
        require('cssnano'),
    ],
};

ほとんどのユースケースでは、デフォルトのプリセットで十分ですが、より積極的な変換を実行する高度なプリセットも提供しています。詳細については、高度な変換ガイドで読むことができます。

オプション構文

オプションはシンプルなパターンに従います-オプションのpostcss-プレフィックスが削除され、残りはcamelCaseに変換される必要があります。そのため、postcss-svgoのオプションを設定する必要がある場合は、次のようにすることができます。

module.exports = {
    plugins: [
        require('cssnano')({
            preset: ['default', {
                svgo: {
                    plugins: [{
                        name: 'preset-default',
                        params: {
                            overrides: {
                                removeDoctype: false,
                            },
                        },
                    }],
                },
            }],
        }),
    ],
};

変換の除外

ビルドで不要な場合は、リストから変換を削除できます。これを行うには2つの方法があります。最初の方法は、オプションキーをfalseに設定することです。

module.exports = {
    plugins: [
        require('cssnano')({
            preset: ['default', {
                svgo: false,
            }],
        }),
    ],
};

または、すでにオプションを指定していて、一時的に変換を除外することを希望する場合は、excludeオプションを設定できます。

module.exports = {
    plugins: [
        require('cssnano')({
            preset: ['default', {
                svgo: {
                    exclude: true,
                },
            }],
        }),
    ],
};

2024年6月5日水曜日午後5時27分34秒に最終更新されました