将 Postcss 与 Vuepress 一起使用

Posted 2023-02-22

【中文标题】将 Postcss 与 Vuepress 一起使用

【英文标题】：Use Postcss with Vuepress

【发布时间】：2019-01-29 22:00:09

【问题描述】：

我正在尝试将 Postcss 插件与我的 Vuepress 自定义主题一起使用，但我无法让它工作。 Vuepress 的文档非常模糊，postcss-loader 中的任何内容都有效。

谁能告诉我怎么用？

【参考方案1】：

在 Vuepress 中使用 postcss 相当容易。您也不需要添加postcss-loader。 Vuepress 自带，因为它默认使用 postcss。您唯一需要的是传递配置选项。以下是经过测试的步骤：

安装你想使用的 postcss 插件（例如yarn add postcss-preset-env -D）

在.vuepress/config.js 中添加：

module.exports = 
    postcss: 
        plugins: [
            require('postcss-preset-env')(/*plugin options*/)
        ]
    

这足以启用插件。更多的： https://vuepress.vuejs.org/config/#postcss

【讨论】：

请注意，文档说默认 postcss 配置将被覆盖而不是扩展。目前它似乎只包含autoprefixer 插件： plugins: [require('autoprefixer')] 。在我开始添加我的东西之前，有没有办法检查当前使用的配置？

PS：上例中autoprefixer是postcss-preset-env添加的，这样就可以了。