前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー