如何解决Webpack报CssSyntaxError:不必要的花括号错误

这个错误的根源很清晰——你的User.vue文件第75行第9列存在多余的大括号，导致CSS解析器无法正常处理代码。下面是一步步的排查和解决方法：

1. 精准定位问题代码 #

直接打开User.vue找到<style>代码块，跳转到第75行附近，重点检查以下几种常见问题：

• 是否误写了双大括号（比如{ { color: #333; } }）：Vue的插值语法{{ }}不能直接用在<style>中（除非是绑定CSS变量的特殊场景，但语法逻辑不同），如果是这种情况，删掉多余的那个大括号即可。
• 是否某个CSS选择器块已经闭合，却多写了一个}：比如写完.ft-user { ... }之后，不小心额外输入了一个闭合括号。
• 是否逗号分隔的多选择器结构中，出现了错误的括号位置：比如button:hover, } button:active { ... }这类明显的语法混乱。

从你提供的错误详情片段来看，那段展示的CSS代码本身是正常的，但报错点在第75行，说明问题出在你未粘贴完整的User.vue代码部分（你提供的组件代码末尾是截断状态）。

2. 快速验证排查 #

你可以先临时注释掉User.vue第75行附近的代码，重新运行Webpack编译：

• 如果错误消失，说明注释掉的代码段存在语法问题，再逐行恢复代码，定位具体错误行。
• 如果错误依然存在，检查<style>块的整体括号匹配情况，比如是否有未闭合的选择器块。

3. 确认Webpack配置兼容性 #

你的Webpack配置中vue-loader和css-loader的搭配逻辑是正确的，但需要注意版本兼容性：

• 确保vue-loader与css-loader版本匹配（比如vue-loader@15.x需要搭配css-loader@3.x及以上版本，具体可查看官方文档的版本要求）。
• 如果你的<style>使用了scoped属性或预处理器（如Sass/Less），要确保对应的loader配置完整（比如处理Sass需要额外配置sass-loader）。

举个错误修正的例子：

/* 错误写法：多了一个闭合大括号 */
.user-menu {
  margin: 0;
} }

修正后：

/* 正确写法 */
.user-menu {
  margin: 0;
}

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