本文最后更新于 2025-03-26，文章内容可能已经过时。 

ERROR Failed to compile with 1 error8:00:31 PM

error in ./src/components/search/SearchSongLists.vue?vue&type=style&index=0&id=5798ddc1&lang=scss&scoped=true&

Syntax Error: SassError: File to import not found or unreadable: ../../assets/css/search-song-lists.scss.
on line 44 of src/components/search/SearchSongLists.vue
>> @import '../../assets/css/search-song-lists.scss';

1. 检查文件路径是否正确

  • 确保文件 search-song-lists.scss 实际存在于以下路径：

    src/assets/css/search-song-lists.scss

    如果文件路径或文件名大小写不匹配（例如 SearchSongLists.scss 和 search-song-lists.scss），也会导致错误。

​2. 检查相对路径的起点

假设你的组件 SearchSongLists.vue 的路径是：

src/components/search/SearchSongLists.vue

  • 从该组件出发，../../assets/css 会解析为：

    src/components/search/../../assets/css → src/assets/css

    确保路径正确，且 src/assets/css 目录存在。

​3. 使用别名简化路径（可选）​

在 Vue 项目中，可以通过 @ 符号代表 src 目录的绝对路径。将导入语句改为：

@import '@/assets/css/search-song-lists.scss';

这样无论组件在哪里，路径都不会出错。

​4. 验证文件名和扩展名

  • 确认文件名 ​完全一致​（包括大小写和连字符）。

  • 确认文件扩展名正确（.scss 而不是 .css）。

​5. 重启开发服务器

修改路径后，重启 Vue 开发服务器：

npm run serve

​总结

90% 的问题是由于路径或文件名错误导致的。请按上述步骤检查，通常可以解决问题。