功能說明

cssnano 接收您格式良好的 CSS 並通過許多重點優化運行它，以確保最終結果對於生產環境盡可能小。

輸入

/* normalize selectors */
h1::before, h1:before {
    /* reduce shorthand even further */
    margin: 10px 20px 10px 20px;
    /* reduce color values */
    color: #ff0000;
    /* remove duplicated properties */
    font-weight: 400;
    font-weight: 400;
    /* reduce position values */
    background-position: bottom right;
    /* normalize wrapping quotes */
    quotes: '«' "»";
    /* reduce gradient parameters */
    background: linear-gradient(to bottom, #ffe500 0%, #ffe500 50%, #121 50%, #121 100%);
    /* replace initial values */
    min-width: initial;
}
/* correct invalid placement */
@charset "utf-8";

輸出

@charset "utf-8";h1:before{margin:10px 20px;color:red;font-weight:400;background-position:100% 100%;quotes:"«" "»";background:linear-gradient(180deg,#ffe500,#ffe500 50%,#121 0,#121);min-width:0}

此 CSS 的語義保持不變，但多餘的空格已被刪除，標識符已壓縮，並且不必要的定義已從樣式表中清除。 這為您的生產環境提供了更小的 CSS。

默認情況下，cssnano 對您的 CSS 文件執行安全優化，但我們也提供了一個高級預設，其中包含您可以用來最大化壓縮的技術。 有關更多詳細信息，請參閱我們的優化指南。

特色

基於 PostCSS

CSSNANO 建立在 PostCSS 插件和環境之上

超過 30 個插件

CSSNANO 擁有超過 30 個插件來優化您的 CSS

可配置

CSSNANO 支援使用預設值的客製化配置，以控制優化級別

技術

cssnano 由 PostCSS 提供支援，PostCSS 是一個使用 JavaScript 轉換樣式的工具。 具體來說，它的插件架構允許我們將 cssnano 組合成具有有限職責的小模組。 它還允許您輕鬆地將 cssnano 插入您的構建步驟中，以及其他可以檢查 CSS 錯誤或轉譯未來語法的處理器。