编译Bootstrap5后缺失-webkit与-moz前缀，求排查方案

核心原因：Bootstrap的源码SCSS里没有硬写浏览器前缀，而是靠Autoprefixer工具在编译完成后自动补全针对不同浏览器的前缀。Live Sass Compiler默认没集成这个工具，所以直接编译出来的CSS会缺失这些前缀。

解决办法分两种情况：

方法一：用官方推荐的npm构建流程（更可靠） #

• 先确保项目里已经装了Bootstrap和基础依赖：
  npm install bootstrap @popperjs/core
• 安装编译所需的工具：
  npm install --save-dev sass postcss postcss-cli autoprefixer
• 在项目根目录创建postcss.config.js，配置Autoprefixer：

  module.exports = {
    plugins: [
      require('autoprefixer')
    ]
  }
  

• 在package.json里加个编译脚本（把your-scss-file.scss换成你的SCSS文件路径）：

  "scripts": {
    "compile:sass": "sass your-scss-file.scss dist/css/bootstrap-custom.css && postcss dist/css/bootstrap-custom.css -o dist/css/bootstrap-custom.css"
  }
  

• 最后运行脚本编译：
  npm run compile:sass

方法二：配置Live Sass Compiler集成Autoprefixer #

• 先在项目里装Autoprefixer：
  npm install autoprefixer --save-dev
• 打开VS Code的settings.json，添加Live Sass Compiler的配置：

  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/dist/css"
    }
  ],
  "liveSassCompile.settings.postcss": true,
  "liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions",
    "Firefox ESR",
    "not dead"
  ]
  

  这里的autoprefix规则和Bootstrap官方用的一致，能保证生成的前缀和原版一致。

内容的提问来源于stack exchange，提问作者swapnil jajoo