vite共享配置之---css相关

vite和webpack都有对样式的处理，涉及到的有css、sass、scss、postcss、模块化，以下是vite和webpack对样式的处理方式

特性	Vite	Webpack
CSS 处理方式	自动处理，无需配置，使用浏览器的原生支持	需要配置 style-loader 和 css-loader，生产环境使用 MiniCssExtractPlugin
Sass/SCSS 支持	原生支持，直接安装 sass 即可，配置 preprocessorOptions 来设置	需要配置 sass-loader，以及 css-loader 和 style-loader
CSS Modules	默认支持，只需在文件名中使用 .module.css	需要配置 css-loader 的 modules 选项
PostCSS	配置在 vite.config.js 中，使用 postcss 字段	配置 postcss-loader 和 postcss.config.js 文件
生产环境 CSS 提取	默认提取，生产模式下自动优化	使用 MiniCssExtractPlugin 提取 CSS
预处理器自定义配置	通过 preprocessorOptions 自定义，如对 Sass/SCSS 设置 additionalData	通过 sass-loader 配置，例如 sassOptions

vite配置代码：

// vite.config.js
export default {
  css: {
    postcss: {
      plugins: [
        require('autoprefixer'), // 自动添加浏览器前缀
        require('postcss-preset-env')({ 
          browsers: 'last 2 versions' // 设置目标浏览器支持
        }),
      ],
    },
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/variables.scss";` // 自动全局引入 SCSS 文件
      },
    },
  },
};