Webpack [url / file-loader]没有解析URL的相对路径 [英] Webpack [url/file-loader] is not resolving the Relative Path of URL

问题描述

我在Webpack中遇到有关相对路径的问题。
让我试着解释这个场景：

I am facing a problem in Webpack regarding Relative Path. Let me try to explain the scenario :

我在工作区目录中有2个单独的项目：

I have 2 separate project in Workspace directory :

1. Project-A [使用Gulp捆绑]：稳定&工作


2. Project-B [使用Webpack捆绑]：新项目

1. Project-A [Bundling using Gulp] : Stable & Working
2. Project-B [Bundling using Webpack] : New project

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

As both the projects are using same Styling, so I wanted to reuse the SCSS files [consisting of standard variables, predefined layouts, modals, classes etc] of Project A into Project B.

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

Now, if I am trying to import Project-A index.scss in Project-B index.scss as another partial [Commenting out the Background Image URL Depency], webpack is able to generate the required CSS output file.

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

但是，由于Project-A的index.scss进一步引用了相应的相对路径的背景图像， webpack build抛出错误

But as Project-A's index.scss is further referring background images from the respective Relative-Path, the webpack build is throwing error

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

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

精确错误块：

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

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

截图：
< img src =https://i.stack.imgur.com/IfQv2.pngalt =**在此输入图像说明**>

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

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

Here is the Code-Repo URL for the simulated issue : 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

1. Download the Repo.
2. Browse inside Project_B folder, and do a NPM install.
3. Run 'webpack'. It would build correctly as Relative Image URL code is commented out.
4. Now put back the commented line of code : https://github.com/raviroshan/webpack-build-issue/blob/master/WorkSpace/Project_A/assets/stylesheets/index.scss#L27

推荐答案

所以，经过这么多的努力，得到一个合适的解决方案。

So, finally after so much struggle, got a proper SOLUTION.

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

It turns out to be an issue with CSS-loader i.e it is not able to resolve the URL with respective to current file.

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

Using resolve-url-loader solved this problem. 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-构建问题

Here is updated Code-Repo with solution : https://github.com/raviroshan/webpack-build-issue

注意：不要省略-loader
您的Webpack.config.js应该始终使用加载器名称的长格式（即-loader后缀）。

Note : Don't omit -loader Your Webpack.config.js should always use the long-form of the loader name (i.e. the -loader suffix).

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

There is another package called resolve-url which Webpack can confuse with resolve-url-loader.

这篇关于Webpack [url / file-loader]没有解析URL的相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！