Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected selector. ╷ 20 │ } │ ^ ╵
时间: 2025-03-20 10:03:50 浏览: 60
### 解决 Sass 编译错误 'expected selector'
Sass 错误 `'expected selector'` 通常表示编写的 SCSS 或者 Sass 文件存在语法问题,或者文件结构不符合预期。以下是可能的原因以及解决方案:
#### 可能原因一:嵌套规则中的语法错误
如果在嵌套的选择器中缺少必要的分隔符或冒号,则会触发此错误。例如,在以下代码片段中,未正确关闭括号可能会引发该问题。
```scss
.button {
&:hover {
color: red;
}
}
```
上述代码如果没有正确缩进或闭合大括号 `{}` 将会产生 `expected selector` 错误[^1]。
#### 可能原因二:加载器配置不正确
当使用 Webpack 和 `sass-loader` 进行构建时,如果配置不当也可能导致此类错误。确保 Webpack 配置如下所示:
```javascript
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
],
},
};
```
如果遗漏了某些 loader(如 css-loader),则可能导致解析失败并抛出类似的错误消息[^2]。
#### 可能原因三:@import 路径问题
有时开发者尝试通过 @import 导入其他样式表时指定路径有误也会造成这种状况 。比如下面的例子展示了如何正确导入部分文件 (partial file),注意前缀下划线 `_` 不应被省略掉除非已经调整过设置允许如此操作:
```scss
// 正确方式
@import '_variables';
@import '_mixins';
// 如果写成这样就会报错
@import 'variables'; // 应改为 _variables.scss 才可以正常工作
```
以上情况均需仔细核查项目内的所有 scss/sass 文档是否存在类似失误之处[^3]。
#### 示例修复后的代码
假设原始有问题的部分像这样子:
```scss
.error-class{
color : blue ;
background-color:green;}
```
修正后应该是这样的形式来满足标准书写习惯从而避免潜在陷阱发生:
```scss
.error-class {
color: blue; /* 添加分号 */
background-color: green;
}
```
阅读全文
相关推荐


















