修改Sass文件后项目报错：Uncaught TypeError: (0 , h.default) is not a function

你遇到的这个问题确实大概率和node-sass与sass-loader的版本兼容性有关，另外热重载缓存也可能是诱因，我给你整理几个可行的解决步骤：

1. 修复依赖版本兼容性 #

你的package.json里node-sass@4.5.3搭配sass-loader@6.0.6，虽然大版本匹配，但部分小版本组合可能存在热重载时的编译bug。建议调整到经过验证的稳定组合：

• 方案一：升级node-sass到4.14.1（这是node-sass最后一个支持旧Node版本的稳定版，和sass-loader@6.0.6兼容）
• 方案二：升级sass-loader到7.3.1，同时保持node-sass@4.5.3（这个组合也经过大量项目验证）

执行命令修改依赖：

# 方案一
npm install node-sass@4.14.1 --save-dev

# 方案二
npm install sass-loader@7.3.1 --save-dev

2. 清除热重载缓存 #

缓存文件损坏也会导致编译异常，按以下步骤操作：

• 停止当前运行的webpack-dev-server
• 删除项目根目录下的node_modules/.cache文件夹（如果存在）
• 清除npm缓存：npm cache clean --force
• 重新安装依赖：npm install
• 重启项目

3. 检查Sass文件的导入语法 #

虽然报错是JS类型错误，但也可能是Sass文件中错误的导入导致编译后的资源无法被正确加载：

• 确保所有Sass文件的@import路径正确，没有引用不存在的文件
• 避免在Sass中使用可能和JS模块系统冲突的语法（比如不要在Sass文件中导出变量给JS直接使用，除非你配置了对应的loader）

4. 临时禁用热重载测试 #

如果以上方法都无效，可以临时禁用webpack的热重载功能，看看是否还会出现问题：

• 在webpack-dev-server的配置中，移除hot: true选项
• 重启项目后修改Sass文件，观察是否正常编译

如果禁用热重载后问题消失，说明是热重载插件和sass编译的兼容性问题，可以尝试升级webpack-dev-server到2.11.5（和你的webpack@3.3.0兼容的稳定版本）：

npm install webpack-dev-server@2.11.5 --save-dev

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