Nextjsでビルド時にbackground-imageで使用しているurlのエラーが出てしまいます。
sassのurlの部分を削除してビルドを実行すると成功しました。
色々調べて試してみたのですがわかりませんでした。よろしくお願いします。
エラー Failed to compile. ./styles/globals.scss.webpack[javascript/auto]!=!./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[3].oneOf[7].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[3].oneOf[7].use[2]!./node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[3].oneOf[7].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[3].oneOf[7].use[4]!./styles/globals.scss Error: resolve-url-loader: CSS error source-map information is not available at url() declaration (found orphan CR, try removeCR option)
試したこと
nextのresolve-url-loaderのremovecrをtrueにしてみましたが駄目でした。
対象ファイル
next.config.js const path=require('path') require('dotenv').config(); module.exports = { env: { APIKEY:process.env.APIKEY, AUTHDOMAIN:process.env.AUTHDOMAIN, DATABASEURL:process.env.DATABASEURL, PROJECTID:process.env.PROJECTID, STORAGEBUCKET:process.env.STORAGEBUCKET, MESSAGINGSENDERID:process.env.MESSAGINGSENDERID, APPID:process.env.APPID, TRACKER_APIKEY:process.env.TRACKER_APIKEY, RIOT_APIKEY:process.env.RIOT_APIKEY, }, }
home.scss .home{ overflow: hidden; min-height:90vh; margin:0 auto; text-align: center; h1{ margin-top:40vh; } //categorieの選択ボタン &-categorie{ height:30px; position:absolute; display: flex; top:120px; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); font-weight: bold; &-item{ @extend %button; margin:0 10px; text-align: center; } @include mq(tb){ position: absolute; top: 5%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } } //random時のコンテンツ設定 &-random{ min-height:90vh; overflow: hidden; width:100%; text-align: center; } //select時のコンテンツ設定 &-select{ overflow: hidden; min-height:90vh; width:100%; text-align: center; &-title{ margin-left:4px; } &-hostName{ margin-left:10px; } &-condition{ margin-left:10px; } } //ランダム参加のタイトル変更ボタン &-title{ height:40px; position:absolute; top:450px; right:100px; list-style: none; margin:0 auto; padding: 0; li{ background-color: $white; font-weight: bold; padding:5px; margin:30px auto; border-bottom:1px solid rgba(0,0,0,0.1) } } //ランダム参加のタイトル画像表示場所 &-circle{ min-height:92vh; width:100%; } //モード切り替えボタン &-mode-button{ @extend %button; margin:20px auto; height:40px; position:absolute; top:0px; right:100px; margin: 20px 0; font-weight: bold; @include mq(tb){ top:0px; right:100px; } } //condition設定フォーム &-condition{ padding:20px; background-color: $white; margin: 100px auto 0px ; width: 300px; &-input{ @extend %input; width: 80%; } &-button{ @extend %button; margin-top:10px; width: 80%; } } //selectの部屋リスト &-list{ &-wrapper{ width:60%; margin:50px auto; } background-color: $yellow; margin-top:10px; box-shadow: 0px 0px 4px 0px rgba(255, 245, 112, 0.781); display:flex; text-align: center; } //ランダムボタンの設定 &-join{ position:absolute; top:800px; right:80px; width:100px; height:100px; border-radius:100px; @include mq(tb){ width:100px; height:100px; border-radius:100px; } @include mq(pc){ width:100px; height:100px; border-radius:100px; } border:none; cursor: pointer; background-color:$white; h1{ color:rgb(223, 223, 223); } } //ボタンに表示する画像の設定----------------------------------------- &-LoL{ background-image:url('../../image/promo_01.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; } &-Apex{ background-image:url('../../image/apex-concept-art-wallpaper-pathfinder.png'); background-repeat: no-repeat; background-size: cover; background-position: center; } &-Valorant{ background-image:url('../../image/suke-cb-key-art-327-final1.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; } &-Fortnite{ background-image:url('../../image/Fortnite_blog_fortnite-chapter-2-update-whats-new_11BR_Launch_News_PatchNotes_Header_v2-1920x1080-b2f19d835444e7e3923974ca9a60f13f261bc91f.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; } //ボタンの状態を表示する----------------------------------------------- &-set{ box-shadow: 0px 0px 4px 4px rgba(255, 245, 112, 0.781); } &-empty{ animation:blink 1s ease 0s infinite alternate none running; @keyframes blink{ 0% { } 100%{ box-shadow: 0px 0px 1px 1px rgba(255, 245, 112, 0.781) } } } }
package.json { "name": "gamematch", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "test": "jest --env=jsdom --verbose" }, "dependencies": { "@material-ui/core": "^4.12.3", "@material-ui/icons": "^4.11.2", "@reduxjs/toolkit": "^1.6.0", "dotenv": "^10.0.0", "firebase": "^8.6.3", "next": "^11.1.2", "react": "17.0.2", "react-dom": "17.0.2", "react-hook-form": "^7.8.1", "react-redux": "^7.2.4", "swr": "^0.5.6" }, "devDependencies": { "@testing-library/dom": "^7.31.2", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^13.1.9", "@types/jest": "^26.0.23", "@types/node": "^15.12.4", "@types/react": "^17.0.11", "babel-jest": "^27.0.2", "jest": "^27.0.4", "typescript": "^4.4.2", } }
あなたの回答
tips
プレビュー