postcss 8 迁移指南

(postcss 插件 tailwindcss 需要 postcss 8，以下是迁移指南)

1. 更新 postcss

首先需要将原来的 postcss 升级到 8 版本。可以通过以下命令进行更新：

npm install postcss@latest --save-dev

2. 更新插件

需要更新使用的所有插件，确保插件的版本支持 postcss 8。可以通过以下命令更新插件：

npm install <插件名称>@latest --save-dev

3. 更新配置文件

更新配置文件中的 postcss 版本号：

// postcss.config.js
module.exports = {
  plugins: [
    // 插件列表
  ],
  postcssOptions: {
    parser: 'sugarss',
    // 将 postcss 版本号改为 8.x.x
    // 支持插件的 preset 需要更新为 '@fullhuman/postcss-purgecss': {}，名称中间改为 fullhuman
    // 方式为 browsers: 'last 2 versions' 废弃，需更改为 'autoprefixer' 或者使用 no 最新版
    // 支持 CSS Intellisense，需要设置 sourceMap 为 true
    // 支持模板字符串语法，需要配置 jsesc: {es6: true}
    postcssOptions: { parser: 'sugarss', plugins: ['postcss-import', 'tailwindcss', 'autoprefixer'] },
  },
}

4. 更新 tailwind.config.js

如果使用了 tailwindcss，需要更新 tailwindcss 的配置文件，以适配 postcss 8 的版本：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  // 修改为 fullhuman
  plugins: [require('@fullhuman/postcss-purgecss')],
}

5. 更新代码

在使用 postcss 相关的代码时，需要注意以下几点：

1. 使用新的语法特性，比如需要使用反斜线转义字符串等。
2. 部分插件可能需要更新 API，需要查看插件的文档进行更新。

结语

以上是 postcss 8 迁移指南，希望能够帮助您尽快完成迁移。如果您遇到了问题，可以查看文档或者寻求帮助。