微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

不太清楚如何表达这个,所以请耐心等待。

我在构建 scss 文件期间遇到了 url() 相对路径问题,同时使用了 3rd 方主题 (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) 位于同一根目录中,以便相对路径仍然有效。

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

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

不啰嗦,这是否有意义,以及关于我应该将阅读重点放在何处以实施某些内容以使此场景起作用的任何建议?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。