預設集

什麼是預設集？

從版本 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 中尋找一個區段，從目前工作目錄向上搜尋，直到到達您的家目錄。這兩個設定範例的功能與上述相同

{
  "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,
                            },
                        },
                    }],
                },
            }],
        }),
    ],
};

排除轉換

如果您的建置不需要轉換，您可能希望將其從清單中排除；有兩種可能的方法可以做到這一點。第一種是將選項鍵設定為 false

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

或者，如果您已經提供選項並且希望暫時排除轉換，您可以設定 exclude 選項

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

最後更新時間：2024 年 6 月 5 日星期三 10:27:34 GMT