Angular应用含双短横线的类编译未转义，引发IE11/Edge14兼容问题

这个问题我之前帮开发者处理过——旧IE和早期Edge对CSS选择器里的双短横线--处理确实有坑，因为--是CSS自定义属性（变量）的官方前缀，这些旧浏览器会把以它开头的类名当成无效语法，必须转义成\--才能正确识别。给你几个可行的解决方案，按推荐优先级排序：

方案1：修改类名（最推荐，长期解决） #

既然双短横线是CSS变量的专属前缀，用来做类名本身就容易引发规范冲突和兼容问题，直接把类名改成更通用的格式是最彻底的办法：

.graph-placeholder {
  opacity: 0;
  transition: 0.2s opacity;
  // 把--loaded改成is-loaded或loaded
  &.is-loaded {
    opacity: 1;
  }
}

编译后得到.graph-placeholder.is-loaded { opacity: 1; }，所有浏览器都能正常识别，还更符合BEM等主流CSS命名规范。

方案2：用PostCSS自动转义（适合大量类名的场景） #

如果不想修改现有类名，可以通过PostCSS插件自动处理转义逻辑，无需手动修改SCSS代码：

1. 安装PostCSS插件：

npm install postcss-escape-classes --save-dev

2. 在项目根目录创建postcss.config.js：

module.exports = {
  plugins: [
    require('postcss-escape-classes')()
  ]
};

3. 在angular.json的build配置中指定PostCSS配置文件：

"architect": {
  "build": {
    "options": {
      "postcssConfig": "postcss.config.js",
      // 其他原有配置...
    }
  }
}

这样编译时插件会自动把.graph-placeholder.--loaded转义成.graph-placeholder.\--loaded，完美兼容旧浏览器。

方案3：手动在SCSS中转义（适合少量类名的场景） #

如果只有少数几个类名需要处理，直接在SCSS里手动添加转义符即可：

.graph-placeholder {
  opacity: 0;
  transition: 0.2s opacity;
  // 给--loaded前加反斜杠转义
  &.\--loaded {
    opacity: 1;
  }
}

编译后会直接生成你需要的.graph-placeholder.\--loaded { opacity: 1; }，旧浏览器能正常解析。

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