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 文件
},
},
},
};