旧Create React App项目启动Sass父选择器&报错求助

AI 小北

2026-7-27

解决SassError: 顶级选择器不能包含父选择器"&"的问题

问题根源

你在_typography.scss的顶层作用域直接调用了placeholder-color混入，而这个混入内部使用了&（父选择器引用符号）。&必须嵌套在某个CSS选择器内部才能生效——它代表当前外层选择器的引用，顶层没有父选择器，因此触发语法错误。

解决方案

方案1：为混入调用添加目标选择器（推荐）

placeholder-color混入用于设置输入框占位符样式，正确用法是将其嵌套在input、textarea等需要设置占位符的元素选择器内部。修改_typography.scss第59行：

// _typography.scss 第59行替换为
input, textarea {
  @include placeholder-color($color-body);
}

这样&会被解析为外层的input或textarea，生成正确的伪元素选择器。

方案2：修改混入以兼容顶层调用（不推荐）

如果必须在顶层调用混入，可以修改_mixins.scss中的placeholder-color混入，增加对无父选择器场景的处理：

@mixin placeholder-color($placeholder-color, $target-selector: 'input, textarea') {
  @if & {
    // 有父选择器时，使用&引用父选择器
    &::-webkit-input-placeholder { color: $placeholder-color }
    &:-moz-placeholder { color: $placeholder-color }
    &::-moz-placeholder { color: $placeholder-color }
    &:-ms-input-placeholder { color: $placeholder-color }
  } @else {
    // 无父选择器时，使用传入的目标选择器
    #{$target-selector}::-webkit-input-placeholder { color: $placeholder-color }
    #{$target-selector}:-moz-placeholder { color: $placeholder-color }
    #{$target-selector}::-moz-placeholder { color: $placeholder-color }
    #{$target-selector}:-ms-input-placeholder { color: $placeholder-color }
  }
}

此方案不符合CSS语义（占位符样式属于输入元素的伪元素），仅作为特殊场景备选。