预设

什么是预设？

从版本 4 开始，预设是一种根据你的用例加载具有不同功能的 cssnano 的方式。现在，你不必选择退出高级转换，而可以选择加入。在引入预设之前，用于执行高级转换的代码会从 npm 下载，无论是否使用它。预设确保不再出现这种情况，并且还能够保存 cssnano 的配置以在多个上下文中重复使用。

预设如何工作？

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

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

预设名称指向可解析的节点模块，可以选择带有 cssnano-preset- 前缀。因此，如果你愿意，可以在这里指定 cssnano-preset-default。

如果你需要将任何选项传递给预设，则必须使用数组语法指定它们。例如，你可以使用以下配置删除所有注释

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

对于其他未明确设置预设的情况，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,
    },
});

如果你需要使用可以接受函数作为参数的转换，则 cssnano.config.js 对于更具体的使用情况很有用。

如果 cssnano 未明确加载预设，或者在任何父目录中未找到配置部分/文件，则将加载默认值。示例 postcss.config.js

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

对于大多数用例，默认预设应该适合你的需求，但我们还提供了一个执行更激进转换的高级预设。你可以在我们的高级转换指南中阅读更多相关信息。

选项语法

这些选项遵循一个简单的模式 - 删除可选的 postcss- 前缀，然后将其余部分转换为 camelCase。因此，如果你需要为 postcss-svgo 设置一个选项，你可以执行

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

排除转换

如果您不需要某个转换，则可能希望将其从列表中排除；有两种可能的方法可以做到这一点。第一种方法是将选项键设置为 false

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

或者，如果您已经提供了选项，并且希望暂时排除某个转换，则可以设置 exclude 选项

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

上次更新时间：2024 年 6 月 5 日星期三，上午 10:27:34 GMT