跳到主要内容

预设(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.jsoncssnano.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,                },            }],        }),    ],};