設定

您可以在 PostCSS 設定或專用的 cssnano 設定中設定 cssnano。PostCSS 設定優先於專用的 cssnano 設定。如果沒有設定，cssnano 將使用 default 預設值執行。

設定檔

透過 PostCSS 設定進行設定

在 PostCSS 設定 中，當您將 cssnano 新增至 PostCSS 外掛程式時，您可以傳遞 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 設定進行設定

您可以使用專用的設定來設定 cssnano，例如，如果您無法存取 PostCSS 設定檔。cssnano 設定可以採用不同的格式：

• 在 package.json 中的 cssnano 選項
• 名為 .cssnanorc.config.json 或 .cssnanorc 的 JSON 檔案
• 名為 cssnano.config.js 的檔案，將設定作為 JavaScript 物件匯出

設定選項

選擇預設值

• 選項： preset
• 類型： string | function | [string, Objects<預設選項>] | [function(預設選項)]

傳遞一個預設值以選擇預先設定的最佳化組合。您可以使用預設名稱作為字串或傳遞匯入預設套件的結果來指定預設值。

以匯入方式使用預設值

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

如果您使用 JSON 格式的設定檔，使用字串會很有用。

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

當您使用字串時，如果預設值稱為 cssnano-preset-<name>，您可以單獨使用 name

cssnano({ preset: 'default' })

停用預設值中包含的外掛程式

您可以停用預設值中使用的一個或多個外掛程式。傳遞一個陣列，其中第一個元素是預設值，第二個元素是具有預設選項的物件。

// 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<外掛程式選項>]>

您也可以將外掛程式清單傳遞給 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