Sass 通过相对路径包含图像的正确方法

我已经将laravel mix更新为版本

4.0.12

，并且在

*.scss

中遇到了构建中断的问题，我使用了一个相对路径来包含背景图像

我得到了下一个文件结构

resources/
|-assets/
||-img/
|||-background.png
||-sass/
|||-footer.scss

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

.footer {
  background-image: url(../img/background.png)
}

const mix = require('laravel-mix');

const resourcesAssets = 'resources/assets/';
const dest = 'public/assets/';

mix
  .copy(`${resourcesAssets}images`, `${dest}images`, false)
  .sass(`${resourcesAssets}scss/footer.scss`, `${dest}css`);

接下来是我的webpack.mix.js

.footer {
  background-image: url(../img/background.png)
}

const mix = require('laravel-mix');

const resourcesAssets = 'resources/assets/';
const dest = 'public/assets/';

mix
  .copy(`${resourcesAssets}images`, `${dest}images`, false)
  .sass(`${resourcesAssets}scss/footer.scss`, `${dest}css`);

在编译期间

npm运行prod

我得到

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: CSS error
predicate must return an absolute path or the result of calling next()
at file://C:\xampp\htdocs\laravel-project\resources\assets\sass\footer.scss:2:3
at encodeError (C:\xampp\htdocs\laravel-project\node_modules\resolve-url-loader\index.js:218:12)
at onFailure (C:\xampp\htdocs\laravel-project\node_modules\resolve-url-loader\index.js:175:14)
at <anonymous>
    at runMicrotasksCallback (internal/process/next_tick.js:122:5)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)
    at runLoaders (C:\xampp\htdocs\laravel-project\node_modules\webpack\lib\NormalModule.js:301:20)
    at C:\xampp\htdocs\laravel-project\node_modules\loader-runner\lib\LoaderRunner.js:364:11
    at C:\xampp\htdocs\laravel-project\node_modules\loader-runner\lib\LoaderRunner.js:230:18
    at context.callback (C:\xampp\htdocs\laravel-project\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at onFailure (C:\xampp\htdocs\laravel-project\node_modules\resolve-url-loader\index.js:175:5)
    at <anonymous>
        at runMicrotasksCallback (internal/process/next_tick.js:122:5)
        at _combinedTickCallback (internal/process/next_tick.js:132:7)
        at process._tickCallback (internal/process/next_tick.js:181:9)

        error  in ./resources/assets/sass/footer.scss

模块构建失败（来自./node\u modules/css loader/index.js）：
ModuleBuildError:模块生成失败（来自./node\u modules/resolve url loader/index.js）：
错误：解析url加载程序：CSS错误
谓词必须返回绝对路径或调用next（）的结果
在文件：//C:\xampp\htdocs\laravel project\resources\assets\sass\footer.scss:2:3
编码错误（C:\xampp\htdocs\laravel project\node\u modules\resolve url loader\index.js:218:12）
在onFailure时（C:\xampp\htdocs\laravel project\node\u modules\resolve url loader\index.js:175:14）
在
在runMicrotasksCallback（内部/process/next_tick.js:122:5）
at_combinedTickCallback（内部/流程/下一步勾选js:132:7）
在进程中。_tick回调（内部/process/next_tick.js:181:9）
在RunLoader上（C:\xampp\htdocs\laravel project\node\u modules\webpack\lib\NormalModule.js:301:20）
在C:\xampp\htdocs\laravel project\node\u modules\loader runner\lib\LoaderRunner.js:364:11
在C:\xampp\htdocs\laravel project\node\u modules\loader runner\lib\LoaderRunner.js:230:18
在context.callback（C:\xampp\htdocs\laravel project\node\u modules\loader runner\lib\LoaderRunner.js:111:13）
在onFailure时（C:\xampp\htdocs\laravel project\node\u modules\resolve url loader\index.js:175:5）
在
在runMicrotasksCallback（内部/process/next_tick.js:122:5）
at_combinedTickCallback（内部/流程/下一步勾选js:132:7）
在进程中。_tick回调（内部/process/next_tick.js:181:9）
./resources/assets/sass/footer.scss中出错

---

如何解决此问题？

问题出现在太新的

“resolve url loader”：“^3.0.0”

中

在安装了中间版本“laravel mix”之后：“~3”不久前，它被添加到了package.json

---

删除它并重新运行构建可以帮助我解决问题。laravel mix添加了

“解析url加载器”：“2.3.1”

在运行

npm run prod

之后，这是一个在网页包中重写url的事情，因为laravel mix构建在网页包之上。对于CSS编译，Webpack会重写和优化样式表中的任何

url（）

调用

然而，根据该报告：

任何给定

url（）

的绝对路径都将从url重写中排除。例如，

url（'/images/thing.png'）

或

url（'http://example.com/images/thing.png“）

将不会被修改

因此，Mix尝试将CSS重写为以下内容：

.footer {
    background-image: url(/img/background.png?<some-hash-identifier>)
}

---

谢谢@pavlo zhukov，从my package.json中删除

resolve url loader

，并让

laravel mix

通过其依赖项包含它所需的版本解决了我的问题。我正在使用

laravel-mix:4.x

，这个安装的

resolve-url-loader:2.3.1显然

laravel-mix`与

resolve-url-loader:3.0

不兼容。@SlyDave我很高兴听到我的答案帮助了其他人。这就是我把它放在这里的主要原因：）感谢您对underhood

url（）

处理的精彩解释。来源问题可以通过我的回答解决，而这是处理

url（）

的另一种方法。欢迎！这还应该克服对较旧版本的

解析url加载程序的回退。