質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1198閲覧

LaravelでSASSを使用して背景画像を設定する

RyoM

総合スコア90

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/18 15:32

編集2019/03/19 11:11

前提・実現したいこと

Laravelで背景画像を設定したいのですが、sassでbackground-imageのurl設定がうまく効かずwebpackのコンパイルでエラーが発生してしまいます。
どなたかご回答よろしくお願いいたします!

発生している問題・エラーメッセージ

ERROR in ./resources/sass/app.scss 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:///home/vagrant/code/makemake/resources/sass/app.scss:9665:3 at encodeError (/home/vagrant/code/makemake/node_modules/resolve-url-loader/index.js:217:12) at onFailure (/home/vagrant/code/makemake/node_modules/resolve-url-loader/index.js:174:14) at runLoaders (/home/vagrant/code/makemake/node_modules/webpack/lib/NormalModule.js:301:20) at /home/vagrant/code/makemake/node_modules/loader-runner/lib/LoaderRunner.js:367:11 at /home/vagrant/code/makemake/node_modules/loader-runner/lib/LoaderRunner.js:233:18 at context.callback (/home/vagrant/code/makemake/node_modules/loader-runner/lib/LoaderRunner.js:111:13) at onFailure (/home/vagrant/code/makemake/node_modules/resolve-url-loader/index.js:174:5) @ ./resources/sass/app.scss ERROR in ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/lib/loader.js??ref--5-5!./resources/sass/app.scss) 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:///home/vagrant/code/makemake/resources/sass/app.scss:9665:3 at encodeError (/home/vagrant/code/makemake/node_modules/resolve-url-loader/index.js:217:12) at onFailure (/home/vagrant/code/makemake/node_modules/resolve-url-loader/index.js:174:14) @ ./resources/sass/app.scss 2:14-254 npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ dev: `npm run development` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

該当のソースコード

scss

1#top-pic { 2 background:url('../images/0662931297.jpg'); 3 //background-size:contain; 4 }

HTML

1<div class="row justify-content-center h-200" id="top-pic"> 2 {{--<img class="logo" src="{{ asset('images/0662931297.jpg') }}" alt="logo">--}} 3 <button type="button" class="btn btn-primary col-md-4 col-lg-4">探す</button> 4 <button type="button" class="btn btn-primary col-md-4 col-lg-4">作る</button> 5</div>

webpack

1const mix = require('laravel-mix'); 2 3/* 4 |-------------------------------------------------------------------------- 5 | Mix Asset Management 6 |-------------------------------------------------------------------------- 7 | 8 | Mix provides a clean, fluent API for defining some Webpack build steps 9 | for your Laravel application. By default, we are compiling the Sass 10 | file for the application as well as bundling up all the JS files. 11 | 12 */ 13 14mix 15 .sass('resources/sass/app.scss', '../resources/build/') 16 .sass('resources/sass/file.scss', '../resources/build/') 17 .styles( 18 [ 19 'resources/build/app.css', 20 'resources/build/file.css' 21 ], 22 'public/css/app.css' 23 ) 24 .js('resources/js/app.js', 'public/js'); 25

追記

package

1{ 2 "private": true, 3 "scripts": { 4 "dev": "npm run development", 5 "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 6 "watch": "npm run development -- --watch", 7 "watch-poll": "npm run watch -- --watch-poll", 8 "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", 9 "prod": "npm run production", 10 "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 11 }, 12 "devDependencies": { 13 "axios": "^0.18", 14 "bootstrap": "^4.3.1", 15 "cross-env": "^5.2.0", 16 "jquery": "^3.3", 17 "laravel-mix": "^4.0.14", 18 "lodash": "^4.17.11", 19 "popper.js": "^1.14", 20 "resolve-url-loader": "^3.0.1", 21 "sass": "^1.17.2", 22 "sass-loader": "^7.1.0", 23 "vue": "^2.6.8" 24 } 25} 26

試したこと

resourcesディレクトリにimagesフォルダを作成し、その中に一旦画像を保存している。
sassでもその相対パスを指定

補足情報(FW/ツールのバージョンなど)

laravel 7.1.3
windows10
vagrant homestead

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

xenbeat

2019/03/19 03:58

インストールされているlaravel-mixとresolve-url-loaderのバージョンはいくつになりますか? package.jsonの内容も合わせて本文に追記ください。
RyoM

2019/03/19 11:11

失礼しました! 記載いたしました!
guest

回答1

0

ベストアンサー

"resolve-url-loader": "^3.0.1","resolve-url-loader": "^2.3.1",に変更してみてください。

投稿2019/03/19 15:54

xenbeat

総合スコア4258

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

RyoM

2019/03/20 12:19

解決致しました! 本当にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問