Laravel中npm run dev编译SCSS生成错误CSS:hover前多空格如何修复

这个问题和package.json、package-lock.json配置没有任何关系，不需要修改这两个文件，本质是SCSS嵌套语法书写错误，不是编译工具的bug。

SCSS嵌套规则的默认逻辑是：嵌套的子选择器如果没有特殊标记，编译时会在父选择器和子选择器之间拼接一个空格，作为后代选择器解析。你源码里嵌套的:hover前没有加父选择器引用标记，编译后自然生成了.nav-link :hover——这个选择器会匹配.nav-link内部所有被hover的后代元素，而不是被hover的.nav-link本身，这就是你看到的“多余空格”的来源，也是样式失效的根本原因。

只需要修改SCSS源码，在:hover前加上&符号即可。&是SCSS的父选择器引用符，会直接把父选择器拼接到当前选择器前面，不会插入额外空格。

修复后的SCSS代码：

.nav-link {
    color: $color_light;
    font-weight: 600;
    font-size: 1.5em;

    &:hover {
        color: $color_vLight;
    }
}

修改完成后重新执行npm run dev编译，生成的CSS就会是正确的.nav-link:hover，没有多余空格，样式即可正常生效。

这个是SCSS嵌套的高频入门坑，大量开发者刚接触SCSS嵌套语法时都遇到过同类问题，不需要调整Laravel自带的Vite/Mix编译配置，也不需要改动依赖版本。

日常写SCSS嵌套时可以按这个规则判断要不要加&：

• 如果要选择当前父元素本身的伪类（比如:hover、:active、:focus）、伪元素（比如::before、::after）、叠加状态类（比如和父元素同级的.active、.disabled类），必须加&拼接
• 如果要选择父元素内部的后代元素，不需要加&，默认拼接的空格就是后代选择器需要的分隔符

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