Sass编译后生成的CSS中row-gap规则未生效且被注释问题

可能原因及解决方法 #

• Autoprefixer 兼容性配置问题
  多数情况下该问题由项目中Autoprefixer的配置导致：如果你的项目browserslist配置包含了不支持row-gap属性的老旧浏览器（如IE11、Chrome<66、Firefox<61），且Autoprefixer未开启grid适配选项，就会自动将不兼容的row-gap属性标记为注释移除。
  解决方法：

  1. 在Autoprefixer配置中显式开启grid适配，以postcss配置为例：

  // postcss.config.js
  module.exports = {
    plugins: [
      require('autoprefixer')({ grid: true })
    ]
  }
  

  2. 调整browserslist配置，去掉无需兼容的超老旧浏览器版本。

• CSS 校验/清理工具拦截
  如果你项目中接入了stylelint、clean-css等校验或压缩工具，老旧版本的工具规则可能会将row-gap识别为非法属性，在构建阶段自动注释或移除。
  解决方法：

  1. 升级对应工具到最新稳定版
  2. 检查stylelint规则，确保没有禁用row-gap相关属性，也可以给当前代码行加临时忽略注释：

  .container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 1.5rem 0;
    /* stylelint-disable-next-line */
    row-gap: 20px !important;
  }
  

• 兼容属性补充
  row-gap是CSS Grid规范后期统一的属性名，旧版规范中对应的属性为grid-row-gap，你可以同时声明两个属性提升兼容性，避免部分旧构建工具识别失败：

  .container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 1.5rem 0;
    grid-row-gap: 20px !important;
    row-gap: 20px !important;
  }
  

内容的提问来源于stack exchange，提问作者Ángel