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

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

新規登録して質問してみよう
ただいま回答率
85.46%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

0回答

1368閲覧

nextjsでビルド時のsassのコンパイルエラーについて

daaaiki

総合スコア4

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2021/09/10 04:30

編集2021/09/10 04:32

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", } }

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

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

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

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

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

maisumakun

2021/09/10 04:36

Webpackの設定はどのようにしていますか?
daaaiki

2021/09/10 04:44

webpackはデフォルトのままで設定しておりません
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問