如何生成与官方一致的带厂商前缀的Bootstrap 5.1.3 CSS？

解决Vite编译Bootstrap SCSS缺失厂商前缀的问题 #

问题原因 #

官方Bootstrap的CSS文件是经过Autoprefixer处理的，它会根据目标浏览器自动补全-webkit-、-moz-这类厂商前缀。而Laravel自带的Vite默认未启用Autoprefixer，所以编译后的CSS会缺失这些前缀规则。

解决步骤 #

1. 安装依赖
   终端执行命令，安装Autoprefixer和PostCSS：

   npm install autoprefixer postcss --save-dev
   

2. 配置PostCSS
   在项目根目录创建postcss.config.js文件，添加匹配Bootstrap 5.1.3浏览器支持范围的配置：

   module.exports = {
     plugins: {
       autoprefixer: {
         overrideBrowserslist: [
           ">= 1%",
           "last 2 major versions",
           "not dead",
           "Chrome >= 60",
           "Firefox >= 60",
           "Firefox ESR",
           "iOS >= 12",
           "Safari >= 12",
           "Android >= 60"
         ]
       }
     }
   };
   

3. 确认Vite配置
   Laravel的vite.config.js默认会自动加载PostCSS配置，无需额外修改。如果有自定义配置，确保未禁用PostCSS模块。

4. 重新编译
   执行编译命令生成带前缀的CSS：

   npm run build
   

此时检查生成的CSS文件，应该已包含所有缺失的厂商前缀规则，与官方Bootstrap 5.1.3的CSS文件一致。

内容的提问来源于stack exchange，提问作者Unkle Benz