配置

您可以在 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<preset options here>] | [function(preset options here)]

传递预设以选择一组预先配置的优化。您可以使用预设名称作为字符串指定预设，或通过传递导入预设包的结果指定预设。

使用导入的预设

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<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