预设（preset）

什么是预设（preset）？

从版本 4 开始，预设（preset）是一种根据你的使用情况加载具有不同功能的 cssnano 的方法。现在，你可以不必删除高级转换（advanced transformations）并同时使用预设（preset）。在引入预设（preset）之前，不管使用与否，都会从 npm 下载执行高级转换的代码，预设（preset）的引入改变了这种状况，并且还能保存 cssnano 的配置以在多个使用场景中重复利用。

预设（preset）是如何工作的？

cssnano 运行一些不同的操作来检查应该使用哪个预设（preset）。首先，它在初始化时检查是否加载了预设（preset），如果加载了就直接使用。例如，在项目根目录中使用 postcss.config.js 文件。

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

预设（preset）的名称指向一个可以解析的 node 模块，可以带有 cssnano-preset- 前缀。因此你可以在这里指定 cssnano-preset-default，如果你愿意的话。

如果有参数需要传递给预设（preset），你必须使用数组形式。例如，你可以通过以下配置将代码中的所有注释都删除：

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

对于未明确指定预设（preset）的情况，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,
    },
});

对于更具体的使用情况，例如你所使用的转换（transformations）需要能够接受函数作为参数的话，那就需要使用 cssnano.config.js 配置文件。

如果 cssnano 未显式加载预设（preset），或者在任何父目录中未找到配置段或文件的话，则加载默认值。 postcss.config.js 示例：

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

对于多数使用情况，默认的预设（preset）就应该能够满足你的需求了，但是我们还提供了一个高级预设（advanced preset）可以执行更激进的转换（transformations）。你可以在我们的高级转换（transformations）指南中了解更多信息。

参数

参数命名遵循一个简单的模式：删除 postcss- 这个前缀，并且余下的参数名遵循驼峰（camelCase）命名方式。因此，如果你需要为 postcss-svgo 设置参数的话，可以这样：

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

排除转换（transform）

如果你在构建的时候不需要某个转换（transform）并希望将其从列表中排除，有两种方法可以实现这一需求。第一种是将参数值设置为 false：

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

另一种方法是：如果你已经设置了参数，并且希望暂时排除某个转换，则可以通过设置 exclude 参数：

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

什么是预设（preset）？​

预设（preset）是如何工作的？​

参数​

排除转换（transform）​

什么是预设（preset）？

预设（preset）是如何工作的？

参数

排除转换（transform）