PostCSS配置文件介绍

PostCSS是一个强大的处理CSS的工具，它的插件生态系统非常丰富。通过在PostCSS中添加一些插件，可以在Web应用程序中自动执行多个CSS预处理操作，如自动添加前缀、压缩CSS并将其编译为最新版本的CSS语言。

PostCSS的配置文件的文件名必须为'postcss.config.js'，它需要导出一个JavaScript对象，其中包含以下类型的键值对：

Input和Output

• input ：需要被处理的CSS文件所在的目录，在这个目录下的CSS文件将会被PostCSS处理并输出到指定的output目录中。
• output ：生成的CSS文件的输出目录和文件名称。如果省略文件名称，则会使用input目录下的CSS文件名。

module.exports = {
  input: 'src/css',
  output: 'dist/css/main.css'
};

PostCSS插件

PostCSS插件用来扩展PostCSS功能，从而实现更多的CSS预处理操作。

module.exports = {
  plugins: [
    require('autoprefixer')({
        overrideBrowserslist: ['last 2 versions']
    }),
    require('postcss-inline-svg')()
  ]
}

在上面的例子中，我们使用了两个PostCSS插件来实现自动添加前缀和内联SVG图像。

详细配置

对于其他更详细的配置项，请参考PostCSS官方文档：https://postcss.org/

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-preset-env': {
      stage: 2,
      autoprefixer: {
        grid: true,
        flexbox: 'no-2009'
      }
    },
    'cssnano': {
      preset: 'default'
    }
  }
};

在上面的例子中，我们添加了三个PostCSS插件：postcss-import, postcss-preset-env和cssnano。其中postcss-import用来处理CSS文件的导入，postcss-preset-env用来编译新的CSS特性，而cssnano则用来压缩CSS代码。

结论

PostCSS是一个非常强大的工具，它可以用来自动化CSS预处理操作，如自动添加前缀、压缩CSS代码等。通过添加PostCSS插件，可以扩展PostCSS功能，支持更多的CSS预处理操作。如果你要使用PostCSS，请务必熟悉PostCSS官方文档，深入了解PostCSS插件的使用方法。