webpack配置中node-sass的includePaths不生效如何解决？

排查步骤 #

• 先确认当前项目sass-loader的版本：如果是v8以下版本，includePaths不需要嵌套在sassOptions字段下，直接写在options里即可，这是最常见的配置错误原因。
• 检查webpack.config.js头部是否引入了path模块，没有的话path.resolve会执行失败，导致路径配置无效。
• 确认loader执行顺序：webpack loader执行规则为从右到左/从下到上，sass-loader必须放在css-loader、style-loader（或MiniCssExtractPlugin.loader）的后面，顺序错误会导致配置不生效。
• 检查...loaders展开的内容中是否存在其他处理scss文件的loader，避免配置被覆盖。
• 验证文件路径有效性：先将scss中的导入语句改为相对路径@import "../assets/sass/config.scss"测试能否正常编译，若可以则确定是includePaths配置失效问题，而非文件缺失。

修复方案 #

情况1：sass-loader版本低于v8 #

修改sass-loader配置如下，移除sassOptions嵌套：

{
  loader: "sass-loader",
  options: {
    includePaths: [
      path.resolve(__dirname, "src/assets/sass")
    ],
  },
}

情况2：loader顺序错误 #

调整use数组的loader顺序，正确示例如下：

use: [
  'style-loader', // 生产环境可替换为MiniCssExtractPlugin.loader
  'css-loader',
  // 其他loader如postcss-loader放在此处
  {
    loader: "sass-loader",
    options: {
      sassOptions: { // v8及以上版本保留该嵌套
        includePaths: [
          path.resolve(__dirname, "src/assets/sass")
        ],
      },
    },
  }
]

其他优化建议 #

删除includePaths中的相对路径配置，仅保留绝对路径即可，避免因执行上下文变化导致相对路径失效。

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