Angular 5执行ng b --prod出现无效选择器警告，样式被省略问题咨询

这个问题我之前碰到过，本质是你的CSS代码存在语法错误，导致Angular生产构建时的CSS解析器误判了选择器，最终直接忽略了.space1x样式。

为什么会出现这个警告？ #

你看到的警告 Invalid selector '; .space1x at 6219:39. Ignoring. 是关键线索——解析器把 ; .space1x 当成了一个完整的选择器，而选择器根本不能以分号开头，属于无效语法，所以直接跳过了这个样式的解析，自然不会把它打包到最终的styles.75b74.bundle.css里。

出现这种情况的核心原因是：在.space1x样式定义的前面，有一段CSS代码存在语法错误，常见场景包括：

• 某个样式块没有正确闭合（遗漏了}）
• 某个CSS属性结尾忘记加分号
• 多写了一个多余的分号或者其他无效字符

举个典型的错误例子，假设你的style.css里有这样的代码：

.header {
  background-color: #fff
/* 这里忘记给属性加结束分号 */
;
.space1x { padding-left: 200px; }

解析器会把前面的错误和.space1x连在一起，形成无效的; .space1x选择器，触发警告并忽略样式。

怎么解决？ #

1. 定位语法错误：打开你的style.css，找到.space1x样式的位置，然后往前逐行检查所有CSS代码：
   • 确认每个样式块的{}是否成对闭合
   • 检查每个CSS属性的结尾是否都添加了分号
   • 排查是否有多余的分号、括号或者其他奇怪的字符
2. 修复后重新构建：修正语法问题后，重新执行ng b --prod，警告应该会消失，.space1x样式也会正常出现在打包后的CSS文件里。
3. 辅助校验（可选）：可以用浏览器开发者工具的CSS面板粘贴代码，或者用本地的CSS lint工具（比如stylelint）快速定位错误——Angular生产模式的CSS校验比开发模式严格很多，所以开发环境可能不会暴露这类问题。

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