如何在webpack中配合sass-loader使用loadPaths配置？

你的配置方向是对的，sass-loader 确实支持将 sassOptions.loadPaths 传递给 Sass 编译器，报错的核心原因是路径未被正确解析。

修复步骤 #

1. 在 webpack.dev.js 中引入 Node.js 的 path 模块，用于生成可靠的绝对路径：

const path = require('path');

2. 修改你的 PATHS_TO_SASS_PARTIALS 配置，使用 path.resolve 生成项目根目录下 scss/partials 的绝对路径：

const PATHS_TO_SASS_PARTIALS = [path.resolve(__dirname, 'scss/partials')];

3. 保持原有 loader 规则不变，重新启动 webpack-dev-server 即可。

原因说明 #

直接使用相对路径 "scss/partials" 时，Sass 编译器的工作路径可能和你预期的项目根目录存在差异（比如 webpack loader 的执行上下文路径）。使用绝对路径可以彻底避免这种路径解析歧义，确保 Sass 能精准找到 partials 目录下的 _colors.scss、_font.scss 等局部文件。

另外确认你的局部文件命名符合 Sass 规范（文件名以下划线开头，如 _colors.scss），这部分你已经做对了，@use "colors" 会自动匹配对应的下划线文件。

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