コンフィギュレーション

cssnanoは、PostCSSのコンフィギュレーションまたは専用のcssnanoのコンフィギュレーションのどちらでも設定できます。PostCSSのコンフィギュレーションは、専用のcssnanoのコンフィギュレーションより優先されます。設定しないと、cssnanoはdefaultプリセットで実行されます。

設定ファイル

PostCSSのコンフィギュレーションを使用した設定

PostCSSのコンフィギュレーションでは、PostCSSのプラグインにcssnanoを追加するときに、presetオプションとpluginsオプションの両方を渡すことができます。たとえば、PostCSSをプログラムで使用する場合は、次の例のように、liteプリセットを使用してcssnanoを使用し、autoprefixerプラグインを追加します。

import postcss from 'postcss';
import cssnano from 'cssnano';
import litePreset from 'cssnano-preset-lite';
import autoprefixer from 'autoprefixer';
const preset = litePreset({ discardComments: false });

postcss([cssnano({ preset, plugins: [autoprefixer] })])
  .process("/* Your CSS here */");

専用のcssnanoのコンフィギュレーションを使用した設定

たとえば、PostCSSのコンフィギュレーションファイルにアクセスできない場合は、専用のコンフィギュレーションでcssnanoを設定できます。cssnanoのコンフィギュレーションは、さまざまな形式で使用できます

• package.jsonのcssnanoオプション
• .cssnanorc.config.jsonまたは.cssnanorcという名前のJSONファイル
• cssnano.config.jsという名前のファイルで、JavaScriptオブジェクトとしてコンフィギュレーションをエクスポートします

設定オプション

プリセットを選択

• オプション: preset
• タイプ: string | function | [string, Objects<preset options here>] | [function(preset options here)]

あらかじめ構成されたセットの最適化を選択するには、プリセットを渡します。"cssnano-preset-<name>`という名前のプリセットを使用している場合は、プリセット名を文字列として指定するか、プリセットパッケージのインポート結果を渡すことができます。

プリセットをインポートとして使用

cssnano({ preset: require('cssnano-preset-default') })

文字列を使用すると、JSON形式のコンフィギュレーションファイルを使用する場合に便利です。

cssnano({ preset: 'cssnano-preset-default' })

文字列を使用する場合、プリセットがcssnano-preset-<name>という名前の場合は、`name`だけを使用できます。

cssnano({ preset: 'default' })

プリセットに含まれるプラグインを無効にする

プリセットで使用されるプラグインの1つ以上を無効にすることができます。最初の要素がプリセットで、2番目の要素がプリセットオプションを含むオブジェクトの配列を渡します。

// cssnano.config.js
module.exports = {
  preset: [ 
    require('cssnano-preset-default'),
    { discardComments: false } 
  ]
};

プリセット名を文字列として使用する場合も、プリセットオプションを渡すことができます。たとえば、次のようにしてadvancedプリセットを使用するときにdiscardCommentsプラグインを非アクティブにする方法を示します。

cssnano({ 
  preset: [
    'cssnano-preset-advanced', { discardComments: false }
  ]
});

個々のプラグインを使用する

• オプション: plugins
• タイプ: Array<'string' | 'function' | ['string' | 'function', Object<Options for the plugin here>]>

cssnanoにプラグインのリストを渡すこともできます。個々のプラグインを設定するには、配列の配列を使用します。

cssnano({ plugins: [['autoprefixer', {}]] });

• 例

  // cssnano.config.js
  module.exports = {
    plugins: [require('autoprefixer')]
    
    // or
    plugins: ['autoprefixer', 'postcss-preset-env']
    
    // or
    plugins: [ 
      ['autoprefixer', { remove: false }],
    ]
  
    // or
    plugins: [
      [ require('autoprefixer'), {remove: false} ],
      [ 'postcss-preset-env']
    ]
  };

最終更新日: 2024年6月5日水曜日 午前10時27分34秒 GMT