所以，经过这么多的斗争，终于得到了一个合适的解决方案。

结果证明是 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')

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

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

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

好像它的CSS-装载机故障并解决了路径的方式@import和url()。它尝试解析所有路径——即使是来自导入样式表的路径——相对于主 CSS 文件——在你的情况下是/Project_B/src/assets/stylesheets/index.scss.

不要哭！有一个解决方案！

也许它并不完美，但它是我迄今为止最好的。

创建一个全局变量，$assetsPath保存相对于当前样式表的资产路径。然后将此变量添加到您的所有url()值中。

在你的/Project_A/assets/stylesheets/index.scss你会写：

/*/ Using !default we can override this variable even before the following line: /*/
$assetsPath: '../' !default;

.container {
    /*/ ... /*/
    .content-wrapper {
        /*/ ... /*/
        background-image: url($assetsPath + "images/content-bg.jpg");
    }
}

在你的/Project_B/src/assets/stylesheets/index.scss你会写：

/*/ The following variable will override $assetsPath defined in the imported file: /*/
$assetsPath: '../../../../Project_A/assets/';

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

善后

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

        /*/ ... /*/
        background-image: url("../images/content-bg.jpg");

虽然，当您将 Project-B 与 Webpack 捆绑在一起时，它会看到 Project-A 的代码为：

        /*/ ... /*/
        background-image: url("../../../../Project_A/assets/images/content-bg.jpg");

因此，您的保存。

我肯定会仔细研究这个问题。如果url-loader尊重@import语句中的路径并将其相应地应用于引用的资产，则所有这些都可以避免。要么我遗漏了某些东西，要么应该将其视为错误。

我希望你有一个美好的一天！
~维克托

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