代码之家 › 专栏 › 技术社区 › Pavlo Zhukov

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

resolve-url-loader node-sass laravel-mix sass

Pavlo Zhukov · 技术社区 · 6 年前

拉维混合料 4.0.12 面临着一个断断续续的结构 *.scss 在这里,我使用了一个相对路径来包含背景图像

我得到了下一个文件结构

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

我的密码在 footer.scss 下一个是什么

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

我的 webpack.mix.js 下一个是什么

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 run 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

我如何解决这个问题?

2 回复 | 直到 6 年前

Pavlo Zhukov 6 年前

这个问题太新了 "resolve-url-loader": "^3.0.0"

安装中间版本后 "laravel-mix": "~3" 不久前,它被添加到 package.json .

"resolve-url-loader": "2.3.1" 跑步后 npm run prod .

Stevemaster92 4 年前

这是一个网页的URL重写的事情,因为Laravel混合是建立在网页的顶部。对于CSS编译,Webpack重写并优化任何 url()

然而,根据 Laravel Docs :

任意给定路径的绝对路径 url() 将从URL重写中排除。例如 url('/images/thing.png') 或 url('http://example.com/images/thing.png') 不会被修改。

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

url() 像这样混在一起就不会碰了 url(../img/background.png) footer.scss

mix.sass(`${resourcesAssets}scss/footer.scss`, `${dest}css`);
    .options({
        processCssUrls: false
    });