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

Question

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

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

1. Project-A [使用Gulp捆绑]:稳定和工作
2. Project-B [使用Webpack捆绑]:新项目

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

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

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

但是,由于Project-A的index.scss进一步引用了相应Relative-Path的背景图像,因此webpack构建会抛出错误

'在XYZ/Project-B/Source/Stylesheets中找不到文件/目录'.

确切的错误块:

./src/assets/stylesheets/index.scss中的错误模块构建失败:ModuleNotFoundError:找不到模块:错误:无法解析'file'或'diWorkSpace\Project_B\src\assets\stylesheets

截图:

我无法理解为什么Webpack无法解决Project-A中的资产的相对路径并且仍在查看"项目B"内部.

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

重现步骤.

1. 下载回购.
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加载器的问题,即它无法解析与当前文件相对应的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')

这里有更新的Code-Repo解决方案:https://github.com/raviroshan/webpack-build-issue

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

还有另一个名为resolve-url的包,Webpack可以将其与resolve-url-loader混淆.