问题标签 [resolve-url-loader]

我一直在尝试调整我的 webpack 配置以加载在 .scss 中定义为背景的 SVG。到目前为止，我总是遇到找不到 .svg 路径的问题。如果我理解正确，Resolve-url-loader 应该可以解决这个问题。实施后，现在发生以下错误：

我已经测试了一些在 StackOverflow 上看到的东西。真正的问题是在后台 url 中定义的图像没有显示在生产版本中。如果有人可以帮助我，我会很高兴！我的文件和配置：

网络包配置：

scss：

如果您需要更多信息，请说出您的需要！

非常感谢。

首先感谢您的帮助，您太棒了。我正在努力使用此设置以使来自 scss 的 url 引用资源正常工作。我的意思是通过 webpack 加载并让它们在开发环境和生产环境中工作。

我们有带有 Vue 前端的 Laravel 项目，我们所做的是 laravel 负责构建视图并提供所需的数据，而 Vue 提供构建块类型的 UI 组件资源。

这个 Vue 部分也是使用基于 quasar 框架的公司 ui 库（quasar 与这个问题无关）。所以它是跨公司项目共享的 UI 库。

问题：我无法使从 ui 库加载的引用资源（字体、图像）的样式无法加载它们。

未找到这些相关模块：

* ../assets/fonts/BebasNeue-Web.eot 在 ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/ loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf- 1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue ?vue&type=style&index=0&lang=scss&, ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js !./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!. /node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=样式&index=0&id=469af010&scoped=true&语言=scss&

这就是 ui-library 中 scss 文件的样子

我试图通过在 vue.config.js 中配置 webpack 来解决它

和

但它不加载资源

我需要在本地开发中加载这些字体图像的解决方案，而且当我构建到 dist 时它也是正确的。我无法破坏 Laravel 和 Vue 之间公共共享文件夹中的 url。

这里的最小复制：https ://github.com/luckylooke/laravel-vue-cli

编辑 30/3/2020：链描述：./src/components/HelloWorld.vue 具有在 sass-loader 选项中配置的 @import "ui-lib_vars" 前置的属性

在 ui-lib_vars $ui-logo-bg: url('#{$ui-imagesPath}logo.png'); 其中 $ui-imagesPath: '../assets/images/'; 这是资源的正确相对路径。

当我关闭 css loader 选项“url: false”时，情况如下：

有趣的是字体被引用相同并且他们没有争论“未找到模块”但它们也没有正确加载..它们加载了一些未知的基本字体并且在控制台中有警告

否则，将选项“url：false”留在那里..情况如上所述，在问题的第一个版本中

任何帮助表示赞赏，谢谢。

resolve-url-loader我在我的 webpack 配置中正确设置时遇到问题。它似乎根本无法解析scss文件中的路径。

这是我的项目文件夹结构：

下面你会发现它webpack.config.js的样子。这有点复杂，但我试图隐藏所有我认为与解决此问题无关的代码块。use通常，方法中的加载器链是由getStyleLoaders文件开头定义的函数创建的。如果preProcessor被标识为sass-loaderthen 则另外resolve-url-loader添加。问题是，在查看resolve-url-loader's debug 时，它似乎无法从文件public夹中的 scss 文件中解析 url。我得到的唯一调试日志如下：

Resolve-url-loader调试日志：

scss我在“调试”日志中看不到的文件中定义了一些 url 链接。我究竟做错了什么？

webpack.config.js细节：

我正在尝试使用 webpack 从 LESS 创建一个 CSS。我的源文件夹具有以下层次结构：

less 文件的内容包括相对字体路径，将在生产中使用

我的输入脚本如下：

当我尝试运行 webpack 脚本时，我收到以下错误：

模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：ModuleBuildError：模块构建失败（来自 ./node_modules/css-loader/dist/cjs.js）：错误：Can' t 解析 '/www/fonts/desyrel/desyrel_-webfont.woff' in ''

我如何通知 webpack，字体 '/www/fonts/desyrel/desyrel_-webfont.woff' 的相对路径指向源路径中的字体：'src/fonts/desyrel/desyrel_-webfont.woff'？

我尝试使用 file-loader 结合 resolve-url-loader 来处理这个问题（按照官方文档https://webpack.js.org/loaders/sass-loader/#problems-with-url的提示），但没有成功。

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

我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 之间。

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

在我的家里，我有三个互联网连接（三个不同的 ISP）。我希望单独管理每个连接的流量。考虑从 ISP 服务 1 链接到 YouTube 的流量。Facebook 流量通过 ISP 2 路由，其他流量通过第三个 ISP 路由。有没有办法做到这一点？

连续 3 天我在设置 Webpack 以进行暂存时遇到了麻烦。目标是在最终的 .css 文件（frontend.css）中重写资产的 url，如下所示：

假设在 .scss 文件中我有：

background: url('/assets/image.png')（这适用于开发和产品）

在最终输出的 .css 文件中，我希望它是：

background: url('https://stage.domain.com/staging/project-name/assets/image.png')

我有脚本npm run stage，构建 js。和 .css 仅用于暂存目的。它使用两个文件在根目录上创建阶段目录frontened-bundle.js and frontend.css.（参见“文件结构”屏幕截图的底部）。

我试图用带有根参数的resolve-url-loader重写url，但我无法让它工作。publicPath 也被忽略。

我不确定我做错了什么。请指出我正确的方向。

文件结构：

webpack.stage.js：

包.json

如何在 Next.js 中将新的TailwindCSS 任意值支持与 SCSS 模块一起使用？

以下代码的 CSS 版本运行良好，但 SCSS 版本抛出错误：

错误日志：

该错误仅发生在生产版本上。

完整的回购：https ://github.com/brc-dd/nextjs-tailwindcss-bug

附加上下文

版本详情：

Node.js：14.7.1
操作系统：Windows 11 (22000.100)

PS：“任意值类”与这里提到的“任意 CSS 类”不同。前者是 JIT 核心的一部分，因此无需任何插件或在指令下定义即可直接应用。@layer

我需要在我的 Vue/Three.js 应用程序中处理 GLTF 和 HDR 文件。这不适用于 Vite。使用 Webpack，我可以在 Webpack 配置中进行设置

有没有办法在 Vite 中做同样的事情？

尝试从 Vue 组件中的相对路径加载 SCSS 文件失败。

配置详情：

使用"mochapack": "^2.1.2",

使用"sass-loader": "^10.2.0",

使用

webpack.config-test.js：

如您所见，尝试根据webpack 推荐使用 URL 重写仍然失败。

错误：

调试尝试：

检查 settings.scss 是否有错误，即使文件为空，它仍然无法找到它。

它def与相对路径有关，但是应该解决的插件似乎不起作用。我希望这只是我没有正确使用它。但我听从了他们的指示。