javascript - Webpack [url/file-loader] 没有解析 URL 的相对路径

Question

我在 Webpack 中遇到了一个关于相对路径的问题。让我试着解释一下这个场景:

我在 Workspace 目录 中有 2 个单独的项目:

1. Project-A [使用 Gulp 捆绑]:稳定且有效
2. 项目-B [使用 Webpack 捆绑]:新项目

由于这两个项目都使用相同的样式，所以我想重用 Project A 到 Project B 的 SCSS 文件 [由标准变量、预定义布局、模态、类等组成] .

现在，如果我尝试将项目 A index.scss 导入项目 B index.scss 作为另一个部分 [注释掉背景图像 URL 依赖性]，webpack 能够生成所需的 CSS 输出文件。

// Import Project A SCSS [Common Varibles, Classes, Styling etc] 
@import "../../../../Project_A/assets/stylesheets/index";

但由于 Project-A 的 index.scss 进一步从各自的相对路径引用背景图像，webpack 构建会抛出错误

'File / dir not found in XYZ/Project-B/Source/Stylesheets'.

确切的错误 block :

ERROR in ./src/assets/stylesheets/index.scss Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'diWorkSpace\Project_B\src\assets\stylesheets

截图:

我无法理解，为什么 Webpack 无法解析项目 A 中 Assets 的相对路径并仍在“项目 B”中查找。

这是模拟问题的 Code-Repo URL: https://github.com/raviroshan/webpack-build-issue/tree/master/WorkSpace

重现步骤。

1. 下载 Repo。
2. 浏览 Project_B 文件夹，并执行 NPM 安装。
3. 运行“webpack”。它会正确构建为相对图像URL 代码被注释掉。
4. 现在放回注释的代码行:https://github.com/raviroshan/webpack-build-issue/blob/master/WorkSpace/Project_A/assets/stylesheets/index.scss#L27

Answer 1

所以，经过如此多的努力，终于找到了合适的解决方案。

原来是 CSS-loader 的问题，即它无法解析与当前文件相关的 URL。

使用 resolve-url-loader 解决了这个问题。 https://www.npmjs.com/package/resolve-url-loader

 // Old Loader Config in Webpack-entry
 loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!sass-loader?sourceMap')

 // New [Fixed] Loader Config in Webpack-entry
 loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap')

这是带有解决方案的更新代码库:https://github.com/raviroshan/webpack-build-issue

注意:不要省略 -loader您的 Webpack.config.js 应始终使用加载程序名称的长格式(即 -loader 后缀)。

还有一个名为 resolve-url 的包，Webpack 可能会将其与 resolve-url-loader 混淆。