Skip to main content

配置

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

配置文件

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

PostCSS 的配置文件 中,你可以添加到 PostCSS 的插件列表中,并同时为 cssnano 设置 presetplugins 参数。例如,如果以编程方式使用 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']
    ]
    }