sass-loader构建失败求助：SCSS文件导入报错

排查步骤及解决方案 #

1. 先检查导入路径是否正确 #

这是最常见的问题，路径错误会直接导致找不到文件：

• 如果styles.scss和styles文件夹同级（比如都在src目录下），把导入语句改成相对路径：

  @import "./styles/custom/loader.scss";
  

• 如果styles.scss本身就在styles文件夹内，路径需要缩短：

  @import "./custom/loader.scss";
  

2. 配置sass-loader的全局搜索路径 #

如果不想每次写长路径，可以给sass-loader配置全局搜索目录：
打开项目的配置文件（比如webpack.config.js、vue.config.js），添加includePaths配置，以webpack为例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                includePaths: ['./src/styles'], // 将styles目录加入全局搜索路径
              },
            },
          },
        ],
      },
    ],
  },
};

配置完成后，导入时直接写@import "custom/loader.scss";即可。

3. 检查文件本身的问题 #

• 确认loader.scss文件名没有拼写错误，注意大小写（Linux/macOS系统下文件名大小写敏感）
• 打开loader.scss检查是否存在语法错误，比如未闭合的大括号、错误的变量定义等

4. 修复依赖版本冲突 #

如果以上方法都无效，可能是依赖版本不兼容：

• 先删除依赖重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 若仍未解决，指定兼容的版本安装：

  npm install sass-loader@^12 sass@^1.49 webpack@^5 --save-dev
  

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