使用mochapack时Vue组件相对路径SCSS导入报SassError找不到样式表

解决方案 #

核心问题原因

resolve-url-loader 强依赖 sass-loader 输出的 sourceMap 完成路径解析，你当前配置中 sass-loader 未开启 sourceMap，直接导致路径解析失效。同时配置缺失样式文件扩展名识别规则，也会触发文件查找失败问题。

修复步骤

1. 给 sass-loader 开启 sourceMap 配置，保证 resolve-url-loader 可以正常工作
2. 在 resolve.extensions 中补充样式类文件扩展名，让webpack可以正确识别样式文件
3. 可选：给 sass-loader 配置公共样式查找路径，避免多层相对路径导入的写法问题

修改后的 webpack.config-test.js 对应配置如下：

// 仅展示需要修改的部分，其余原有配置保持不变
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const { VueLoaderPlugin } = require('vue-loader');
const { alias } = require('./webpack.config.js');

module.exports = {
    // ... 原有target、externals等配置
    module: {
        rules: [
            // ... 其他原有rule配置
            {
                test: /\.s[ac]ss$/i,
                use: [
                    {
                        loader: 'vue-style-loader',
                        options: {
                            sourceMap: true,
                            sourceMapContents: false
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            sourceMapContents: false
                        }
                    },
                    'resolve-url-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            // 必须开启sourceMap，否则resolve-url-loader无法工作
                            sourceMap: true,
                            // 可选配置：公共scss文件存放目录，配置后导入时不需要写多层相对路径
                            // sassOptions: {
                            //   includePaths: [path.resolve(__dirname, 'src/styles')]
                            // }
                        }
                    },
                ]
            }
        ]
    },
    resolve: {
        alias: {
            ...alias
        },
        // 补充样式文件后缀识别规则
        extensions: ['.js', '.vue', '.scss', '.sass', '.css']
    },
    // ... 原有plugins配置
};

额外注意项

如果运行环境是Linux或者大小写敏感的macOS文件系统，需检查导入的文件名大小写是否和实际文件完全一致，大小写不一致也会触发找不到文件的报错。

修改完成后重启测试服务，重新执行命令即可生效。

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