webpack - 无法正确 webpack 构建包含相对 url() 引用的 scss 文件，而不将主文件放置在 3rd 方库目录中

Question

不完全确定如何表达这一点，所以请耐心等待。

我url()在构建 scss 文件期间遇到了相对路径问题，同时将第 3 方主题 (PrimeVue) 与我的 webpack 设置一起使用。每次我运行 webpack 构建时，它都会失败

Error: Can't resolve '../../../framework/apollo-vue-3.0.1/public/assets/sass/images/landing/landing.jpg'

其他文件也出错了，除了修改源主题库和更改相对路径之外，似乎没有办法修复错误。

这些是我对错误原因的初步假设：

• Webpack 希望url()调用中的引用与条目 scss 文件相关。
• 编写第 3 方主题文件时，包含 url() 的文件是相对于库中的主源文件编写的。
• 对于任何覆盖任何 sass 变量的自定义文件，它必须与原始源 scss 文件 ( /myapp/frameworks/3rdpartytheme/custom/custom-styles.scss) 位于同一根目录中，以便相对路径仍然有效。

我的问题来了。为了让我们能够轻松地更新这个第 3 方依赖文件夹（不在node_modulesbtw 中），我们需要将任何自定义变量放在第 3 方文件夹之外的目录中，这将在更新时完全覆盖。所以我们把我们的.scss文件放进去/myapp/assets/custom-styles.scss，这个文件@import就是主题文件。只要没有url()参考，就可以很好地用于实际主题。

我也尝试过resolve-url-loader，但这仍然没有帮助，因为resolve-url-loader试图将相对 url 的基础调整为相对于代码行的源。假设根文件是基础文件，我们似乎需要介于此和 webpack 之间。

不啰嗦，这是否有意义，以及关于我应该将阅读重点放在哪里以实现某些东西以使这个场景工作的任何建议？

标签： webpacksassprimevueresolve-url-loader