执行npm run dev编译代码时出现Sass语法错误及子编译报错求助

错误信息 #

执行npm run dev编译代码时触发如下错误：

1 WARNING in child compilations(Use 'stats.children: true' resp. '--stats-children' for more details)
ERROR in ./scss/libraries/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "}" : expected "}", was ""
        on line 353 of scss/regions/_footer.scss
        from line 10 of scss/libraries/main.scss
>> }
   ^
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)

问题原因 #

这是典型的Sass括号不匹配语法错误，编译器定位到scss/regions/_footer.scss第353行的}时，找不到对应的起始{，说明代码中存在左括号缺失或右括号冗余的情况，导致代码块结构混乱。

解决步骤 #

• 打开scss/regions/_footer.scss文件，直接跳转到第353行
• 检查该行及上方的代码：
  • 查找嵌套的CSS选择器、@media/@mixin等Sass规则，确认是否有遗漏的{
  • 或者检查是否多写了一个}，若有则删除多余的闭合括号
• 修复完成后重新执行npm run dev，验证编译是否正常

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