Правильный способ включить изображение через относительный путь - PullRequest
Новая
       102

Правильный способ включить изображение через относительный путь

0 голосов
/ 21 декабря 2018

Я обновил laravel-mix до версии 4.0.12 и столкнулся с поврежденной сборкой на линии в *.scss, где я использовал относительный путь для включения фонового изображения

Iполучил следующую структуру файлов 

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

мой код в footer.scss следующий 

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

My webpack.mix.js isдалее 

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 ]

0 голосов
/ 23 января 2019

Это перезапись URL в Webpack, так как Laravel Mix построен поверх Webpack.Для компиляции CSS Webpack переписывает и оптимизирует любые url() вызовы в ваших таблицах стилей.

Однако, согласно Laravel Docs :

Абсолютные пути для любыхданные url() будут исключены из перезаписи URL.Например, url('/images/thing.png') или url('http://example.com/images/thing.png') не будут изменены.

Итак, Mix пытается переписать ваш CSS в sth.например: 

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

В этом случае вы можете отключить url() примерно так, и Mix не будет касаться url(../img/background.png) в вашем footer.scss : 

mix.sass(`${resourcesAssets}scss/footer.scss`, `${dest}css`);
    .options({
        processCssUrls: false
    });
0 голосов
/ 21 декабря 2018

Проблема была слишком новой "resolve-url-loader": "^3.0.0".

После установки промежуточной версии "laravel-mix": "~3" некоторое время назад она была добавлена ​​в package.json .

Удаление и повторная сборка помогает мне решить проблему.laravel-mix добавлен "resolve-url-loader": "2.3.1" после запуска npm run prod.

...