我在 Webpack 中遇到了一个关于相对路径的问题。 让我试着解释一下这个场景:
我在 Workspace 目录 中有 2 个单独的项目:
- Project-A [使用 Gulp 捆绑]:稳定且有效
- 项目-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
重现步骤。
- 下载 Repo。
- 浏览 Project_B 文件夹,并执行 NPM 安装。
- 运行“webpack”。它会正确构建为相对图像 URL 代码被注释掉。
- 现在放回注释的代码行:https://github.com/raviroshan/webpack-build-issue/blob/master/WorkSpace/Project_A/assets/stylesheets/index.scss#L27
最佳答案
所以,经过如此多的努力,终于找到了合适的解决方案。
原来是 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 混淆。
关于javascript - Webpack [url/file-loader] 没有解析 URL 的相对路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41306822/