Skip to main content

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