vite中配置postcss-loader

在 Vite 中配置 PostCSS Loader 需要做以下几步：

1. 安装 postcss-loader 和 postcss-preset-env（或者其他需要使用的 PostCSS 插件）：

npm install postcss-loader postcss-preset-env --save-dev

2. 在 `vite.config.js` 中添加 PostCSS Loader 的配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        require('postcss-preset-env')({
          // Options
        }),
      ],
    },
  },
});

在 `css.postcss.plugins` 中添加需要使用的 PostCSS 插件，这里使用了 `postcss-preset-env` 插件，并且可以在选项中传入配置。

3. 在样式文件中使用 PostCSS：

/* styles.css */
:root {
  --primary-color: #007bff;
}

.btn {
  background-color: var(--primary-color);
}

在样式文件中使用了 CSS 变量，需要使用 PostCSS 来处理，只需要在样式文件中引入 `postcss-preset-env`：

/* styles.css */
@import 'postcss-preset-env';

:root {
  --primary-color: #007bff;
}

.btn {
  background-color: var(--primary-color);
}

这样就可以配置 PostCSS Loader 了。