Javascript 网页包[url/文件加载器]未解析url的相对路径

我在网页中遇到一个关于相对路径的问题。 让我试着解释一下情况：

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

Project-A[用大口啤酒捆绑]：稳定和工作

Project-B[使用网页包进行捆绑]：新项目

由于两个项目都使用相同的样式，所以我想将项目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进一步引用了来自相应相对路径的背景图像，因此网页包构建出现了错误

“在XYZ/Project-B/Source/Stylesheets中找不到文件/dir”

精确错误块：

./src/assets/stylesheets/index.scss中出错 模块生成失败：ModuleNotFoundError:未找到模块：错误：无法解析“文件”或“diWorkSpace\Project\u B\src\assets\stylesheets”

截图：

我无法理解，为什么Webpack无法解析Project-A中资产的相对路径，但仍在查看“Project B”

以下是模拟问题的代码Repo URL：

复制步骤。

下载回购协议

在Project_B文件夹内浏览，并执行NPM安装

运行“webpack”。它将正确地构建为相对图像 URL代码被注释掉了

现在放回注释过的代码行：

---

您需要将publicPath设置为相对路径，以获取文件加载器中的相对路径。

这似乎是css加载器的故障，以及它在

@import

和

url（）

中解析路径的方式。它尝试解析与主CSS文件相关的所有路径（即使是来自导入样式表的路径），在您的示例中，主CSS文件是

/Project\u B/src/assets/stylesheets/index.scss

别哭！有一个解决办法！ 也许它并不完美，但它是迄今为止我买的最好的

创建一个全局变量

$assetsPath

保存相对于当前样式表的资产路径。然后将此变量前置到所有

url（）

值

在您的

/Project\A/assets/stylesheets/index.scss

中，您将编写：

/*/使用！默认情况下，我们甚至可以在以下行之前覆盖此变量：/*/
$AssetPath:“../”！违约
.集装箱{
/*/ ... /*/
.内容包装器{
/*/ ... /*/
背景图片：url（$AssetPath+“images/content bg.jpg”）；
}
}

在您的

/Project\u B/src/assets/stylesheets/index.scss

中，您将编写：

/*/以下变量将覆盖导入文件中定义的$AssetPath：/*/
$assetsPath:“../../../../Project_A/assets/”；
/*/导入项目A SCSS[常见变量、类、样式等]/*/
@导入“../../../../Project_A/assets/stylesheets/index”；

后果 如果您将Project-A与Gulp捆绑在一起，它将看到Project-A的代码如下：

/*//*/
背景图片：url（“../images/content bg.jpg”）；

尽管如此，当您将Project-B与Webpack捆绑在一起时，它会看到Project-A的代码如下：

/*//*/
背景图片：url（“../../../../Project_A/assets/images/content bg.jpg”）；

因此，你得救了

我肯定会仔细研究这个问题。如果

url加载器

尊重

@import

语句中的路径，并相应地将其应用于引用的资产，那么所有这些都可以避免。要么我遗漏了什么，要么应该被认为是一个bug

我希望你有一个美好的一天

---

~Wiktor

经过这么多的努力，终于找到了一个合适的解决方案

这是CSS加载器的一个问题，即它无法解析与当前文件对应的URL

使用解析url加载程序解决了此问题。

以下是更新的代码Repo和解决方案：

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

---

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

因此，我当前的公共路径代码是：publicPath:“/public/”，即使我试图将其更改为任何相对路径，我也会收到相同的错误。publicPath:“…/../public/”请您详细说明一下，或者我遗漏了什么吗？我试着指的是“问题的核心是CSS相对于自身加载资产，而js相对于HTML加载资产。因此，如果CSS与HTML不在同一位置，那么您就不能使用相对路径。”因此，看起来这是行不通的。有其他选择吗？请尝试将此名称=[path][name].[ext]添加到文件加载器。{test://\.jpg$/，loader:“文件加载器？名称=[path][name]。[ext]”}这不起作用。我想您提供的解决方案是将URL链接到bundle.css。我的问题是-我无法构建包本身。将用示例代码库URL更新我的问题。非常感谢！在我的例子中，我无法让publicPath清除config.publicPath部分。将其设置为“/”worked您的方法会奏效，但由于各种原因，我不想在项目代码库中做任何更改。我已经找到了一个更简单的解决方案，把它贴在这里…我也在努力让它工作。我正在将CSS导出到一个名为Content的文件夹中。然后图像使用“Content/[hash].[ext]”。这会将图像添加到~/Content，但当CSS查找图像时，它会在Content/Content/…pngI将

添加到my

publ中
 // 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')