问题标签 [resolve-url-loader]

我的 webpack 配置文件是由 vue-cli 生成的。

我猜我需要应用为 webpack 1 编写的以下修改，以添加 resolve-url-loader。（见解析网址加载器

如何编辑我的 webpack 2 配置？它由（文件！

感谢您的反馈和有用的阅读链接...

此处的可重复设置最少：https ://github.com/jamesopti/webpack_playground/tree/resolve_url_loader_issue

我试图使用resolve-url-loader向我的 scssurl()图像路径添加一个哈希名称，但我有一段时间让它与 webpack 4 一起工作。我有一堆图像/static/img/**在我的 SCSS 中被引用，例如：

这在我的 css 中以完全相同的方式结束（resolve-url-loader 没有找到它们）

当我通过 webpack 运行以下配置时，我看到解析加载器正在寻找正确url()的路径及其路径，但调试模式显示未找到。

是否有一些不正确的输出配置？我尝试了各种设置组合均无济于事：

我的最终目标是让文件加载器将它们转换为 /dist 散列版本：

// Webpack 规则配置

在 vue.js 项目上加载字体似乎有很多问题，我正在使用 webpack 构建和我的

构建/webpack.base.conf.js

URL 加载器如下所示：

在我的 src 文件夹中，我有

资产/字体/Radomir Tinkov - Gilroy-Regular.otf

我的 App.vue 包含以下代码：

在我的终端中，我收到以下错误：

未找到此相关模块：

如何在 vue.js 中定义正确的字体路径？

我正在将 Webpack 集成到已经建立的前端环境中。Sass 和 resolve-url-loader 正在工作，Webpack 会找到 CSS 中引用的文件url()。我的问题是，我不想将引用的文件复制url()到 dist/ 文件夹中，我想链接到它们所在的位置。

我的文件是这样设置的

与 main.scss 导入 thing.scss 其中包含该行

background: url(../../images/pic.jpg)

resolve-url-loader 正确地将其解析为../images/pic.jpg，并且 css-loader 找到文件并调用文件的加载器（file-loader）。但是，我不想将文件复制到 dist/ （我通过添加emitFile: false到文件加载器来完成）并将 url 重写为与 CSS 输出 ( ../assets/images/pic.jpg) 相对。我该怎么做呢？

作为参考，这是我的 webpack.config.js

我已将laravel-mix更新为版本，并在我使用相对路径包含背景图像4.0.12的行中遇到了损坏的构建*.scss

我得到了下一个文件结构

我在footer.scss中的代码是下一个

我的webpack.mix.js是下一个

在编译期间npm run prod我得到了

我该如何解决这个问题？

我的环境 我有一个使用 React Native 的 RoR 应用程序设置。我使用 rails server 和 webpack 作为我的开发环境。

尝试添加 UI 库我将文档 中需要的材料 ui 文件添加到我的 ReactJS 应用程序中。

我的问题 在将 Material UI 文件添加到我的根 ReactJS 文件夹后运行我的应用程序时

编译时出现以下错误：

根据此错误，Resolve-url-loader 设置不正确

错误的 resolve-url-loader 设置导致多米诺骨牌效应，理由是 sass/scss 不起作用。

我尝试将以下节点库添加到我的应用程序

在我的主根文件夹中创建并配置了webpack.config.js

将 sass 加载器添加到 environment.js 文件

./config/webpack/environment.js

我也试过npm rebuild node-sass

在我尝试配置 webpack 和 resolve-url-loader 之后，我仍然无法让它工作。我已经阅读了他们各自的文档、其他问题和解决方案，但即使是 resolve-url-loader 自己的文档也说它很难配置。

我希望能够在我的 app 文件夹中编译和处理 scss/sass 文件

当前文件夹结构

请问我是否需要更多信息

Resolve-url-loader没有解析我的css 文件中的图像/字体。我的文件夹结构是这样的：

输出文件夹：

图像和字体在开发服务器中显示正常，并在生产中正确复制。main-output.css -检查时 - 显示

background:url(public/images/banner-bg.jpg

而不是预期的

background:url(../images/banner-bg.jpg)

浏览器控制台显示错误：

GET file: ///home/ustrd/Documents/myproject12/dist/public/stylesheets/public/images/banner-bg.jpg net:: ERR_FILE_NOT_FOUND

任何想法如何解决这个问题？

我试图在我的表面上运行一个反应项目作为开发服务器，如果给我下面和标题中显示的错误。当我在我的电脑上运行相同的配置时，我没有遇到这个问题。（我尝试创建相同的条件，但它不起作用）。

错误：

来自浏览器控制台的完整错误：（Chrome）

我在项目中执行 NPM start 时遇到问题。我收到此错误消息：

虽然 css 文件解析得很好，但在 scss 中它根本无法解析。有谁知道解决方案？Sass-loader 告诉我使用“resolve-url-loader”，但我无法让它工作。我试图添加字体真棒。如果我使用css版本它工作得很好（文件加载器甚至将字体复制到dist）但没有scss。

这是我的产品配置文件。

webpack.production.js

提前致谢。干杯