Skip to main content

配置

你可以在 PostCSS 的配置文件中配置 cssnano，也可以通过 cssnano 的专属配置文件进行配置。PostCSS 的配置文件的优先级高于 cssnano 的专属配置文件。 如果未做任何配置，cssnano 将使用 default 预设（preset）配置。

配置文件​

通过 PostCSS 的配置文件进行配置​

在 PostCSS 的配置文件 中，你可以添加到 PostCSS 的插件列表中，并同时为 cssnano 设置 preset 和 plugins 参数。例如，如果以编程方式使用 PostCSS 的话，以下代码展示了如何同时使用 cssnano 和 autoprefixer，并且 cssnano 使用了 lite 预设（preset）配置。

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 的专属配置文件中为 cssnano 设置参数。cssnano 的专属配置文件支持多种格式。

  • 在 package.json 文件中为 cssnano 设置参数
  • 命名为 .cssnanorc.config.json 或 .cssnanorc 的 JSON 文件
  • 命名为 cssnano.config.js 的文件，并且以 JavaScript 对象的形式导出（export）配置参数

参数​

选择一个预设（preset）配置​

  • 参数： preset
  • 类型： string | function | [string, Objects<preset options here>] | [function(preset options here)]

Pass a preset to choose a pre-configured set of optimizations. You can specify a preset with the preset name as a string or by passing the result of importing the preset package.

导入（import）预设（preset）并传递参数：

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

如果采用的是 JSON 格式的配置文件时，则使用字符串作为参数会非常方便。

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

当使用字符串作为参数时，如果预设（preset）名是类似 cssnano-preset-<name> 形式的话，则只使用 name 作为名称即可：

cssnano({ preset: 'default' })

禁用预设（preset）中添加的某个插件​

You can disable one or more of the plugins used in a preset. Pass an array where the first element is the preset and the second is an object with the preset options. 

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

将预设（preset）名当作字符串来指定预设（preset）时，也可以向预设（preset）自身传递参数： 例如，在使用 advanced 预设（preset）时，以下配置展示了如何停用 discardComments 插件：

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

Use individual plugins​

  • 参数： plugins
  • 类型： Array<'string' | 'function' | ['string' | 'function', Object<Options for the plugin here>]>

你还可以给 cssnano 配置一系列的插件。 如需配置各个单独的插件，请使用数组套数组的方式，如下所示：

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

  • 示例：

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

      // 或者
      plugins: [
        [ require('autoprefixer'), {remove: false} ],
        [ 'postcss-preset-env']
      ]
    }