Q&A
エラーメッセージをご提示ください。
前提・実現したいこと
発生している問題・エラーメッセージ
vscodeで エラー表示→Successに瞬時になるが、エラーが出ている。 内容: Compilation Error Error: no mixin named jp-txt on line 84 of sass/e:????(USB名)???中級編\Onsen\Scss\contents\_onsen-contents.scss from line 9 of sass/e:???(USB名)??????\中級編\Onsen\Scss\onsen.scss >> @include jp-txt(50%); ※一部、???にしていますが、きちんとディレクトリー順に表示されています。
試したこと
Youtube で@mixinの使い方を学び、そのように書いているが
エラーが出る。
該当のソースコード
asserts
1//カラー 2$bg-white: #ffffff; 3$word-color: #000000; 4 5 $link-color: #978F10; 6 7 8 .body-wrapper{ 9 overflow: hidden; 10 } 11 12※色などの土台scss 13 desu
SCSS
1html{ 2 font-size: 62.5%; 3 4} 5 6body{ 7 font-size: 1.6rem; 8 color: $word-color; 9 min-width: 100vw; 10 11} 12 13img{ 14 width: 100%; 15 height: auto; 16 vertical-align: bottom; 17} 18a{ 19 text-decoration: none; 20} 21li{ 22 list-style: none; 23} 24section{ 25 @include tb { 26 margin-top: 60px; 27 } 28 @include sp{ 29 margin-top: 60px; 30 } 31} 32 33.inner{ 34 max-width: 1180px; 35 margin: 0 auto; 36 -webkit-box-sizing: border-box; 37 box-sizing: border-box; 38 @include tb { 39 padding: 0 25px; 40 } 41 @include sp { 42 padding: 0 15px; 43 } 44} 45.wrapper{ 46 width: 100%; 47 margin: 0 auto; 48 /* -webkit-box-sizing: content-box; 49 box-sizing: content-box; */ 50 @include tb { 51 padding: 0px 20px; 52 } 53 @include sp { 54 padding: 0 20px; 55 } 56} 57 58//sec-theme 59.sec-theme{ 60 margin: 0 auto; 61 >img{ 62 display: block; 63 width: 3.3%; 64 height: 5.1%; 65 margin: 0 auto; 66 padding-top: 60px; 67 padding-bottom: 20px; 68 } 69 70 .cmn-ttl{ 71 display: block; 72 font-size: 3.6rem; 73 color: $word-color; 74 text-align: center; 75 margin: 0 auto; 76 } 77} 78 79 80//共通リンク 81.cmn-link{ 82 background-color: $bg-white; 83 width: 40%; 84 height: calc(54px/545px*100%); 85 border: 1px solid #707070; 86 font-size: 1.6rem; 87 text-align: center; 88 @include tb { 89 margin-top: 50px; 90 margin: 0 auto; 91 92 } 93 @include sp { 94 width: 100%; 95 margin-top: 35px; 96 margin: 0 auto; 97 } 98} 99 100.contents-inner{ 101 max-width: 1180px; 102 margin: 0 auto; 103} 104 105※全体の共通項だけを抜き出したSCSSです 106
@mixin jp-txt($left) { .jp-text{ // display: flex; // align-items: center; text-align: center; position: relative; top: 40%; left: $left; transform: translate(-40%, -50%); .ttl{ padding: 30px 0px 50px; font-size: 2.4rem; } .desc1{ line-height: 2.0; } } &-txt-left{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 810px; height: 380px; line-height: 1.5; padding: 20px; z-index: -2; left: $left; } }
//jp-text &-item{ /* display: grid; grid-template-columns: 2fr 1fr; */ position: relative; margin-bottom: 290px; @include tb{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 550px; } &:nth-of-type(2){ position: relative; margin-bottom: 290px; display: flex; flex-direction: row-reverse; @include tb{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 550px; } } &-img{ img { width: 525px; height: 300px; } @include tb{ margin-left: -350px; } } &-txt{ background-image: url(../../img/bg.png); background-position: center; background-size: cover; @include tb{ width: 100%; } &.slide-up{ @include sp{ background-image: none; transform: translateY(); z-index: 9999; } } } &-txt-right{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 810px; height: 380px; line-height: 1.5; padding: 20px; z-index: -2; @include jp-txt($left: 40%); @include tb { /* width: 90%; top: 20%; left: 0%; margin-top: 300px; margin-right: 450px; transform: translate(-50%, 50%) */ display: grid; } } ※貼り直しました
@import "../../Scss/foundation/base"; @import "../Scss/foundation/general"; @import "../../Scss/foundation/mixin"; @import "../../Scss/layout/header"; @import "../../Scss/layout/modal"; @import "../../Onsen/Scss/layout/fv"; @import "../../Scss/layout/sp"; @import "../../Onsen/Scss/foundation/bread"; @import "../../Onsen/Scss/contents/onsen-contents"; @import "../../Scss/layout/footer"; ※こちらは。温泉のコンパイルするためのSCSS ファイルです。
ご教授頂けると幸いです
いつもご回答ありがとうございます。
Vscode上でのエラーは下記です。
Error: no mixin named jp-txt
on line 84 of sass/e:\????(USB名)\???中級編\Onsen\Scss\contents\_onsen-contents.scss
from line 9 of sass/e:\???(USB名)\???\???\中級編\Onsen\Scss\onsen.scss
>> @include jp-txt(50%);
何卒宜しくお願い致します。
エラーが出るコードをご提示ください。
include しないとエラーにならないのでは。
元のコード(mixin設定)をscss部分に書きました。
ご教授よろしくお願いいたします。
$word-color が定義されていないエラーになるようですね。
そもそもミックスインを呼び出していないので、ご提示のエラーにはならないのでは。
**ご提示の**エラーが再現するコードをご提示ください。
ごめんなさい。assertsにも変数を使っていたため、改めて、投稿しました。恐れ入ります！！！
ご提示のコード**だけ**で、ご提示のエラーが出ますでしょうか？ 出ないと思いますが。
出てきます。何なら、jp-textをすべて消しました。
が、出てきます。
出てきます、下記のエラーです。うーんといった感じです。今はコンパイルしても、CSSが動かない状況でなんもできないです汗
Compilation Error
Error: no mixin named jp-txt
on line 83 of sass/e:\BUFFALO\ コピー\???\中級編EX2\Onsen\Scss\contents\_onsen-contents.scss
from line 9 of sass/e:\BUFFALO\コピー\???\中級編EX2\Onsen\Scss\onsen.scss
>> @include jp-txt(50%);
---------------------^
--------------------
いや、だって、その @include jp-txt(50%) ってコードがないですよね？
存在しない行でエラーは起きようなくないですか？
本当にそうなんですよね
SHIFT + Fを押して、検索しても出てこないので、ないんですよね。。。
そもそも、コンパイルが成功していないと仮定すると、一応
Errorに一瞬なるけど、すぐにサクセスになります。
ここに違和感を感じ、見ると上記のエラーが出ます。
本当に、よくわからない原因です。
今はシャットダウンして様子見ます
ctrl+shift+f で検索してみては。
結論、何とか原因追及は少しできました。
しかし、やっぱり、@mixin を使うと、エラーが出てしまいます。
(@include jp-txtを消すとエラーは出ません)
ご教授頂けると幸いです
提示されたコードは1枚のファイル上に書かれているものなのか、複数のファイルに分けられているのか、どちらでしょうか。
複数のファイルに分けられています
グループは
1.asserts
2.2と３個目
3.4こめです
@import @use などで読み込んでいる部分をご提示ください。
追記しました。よろしくお願いいたします。
それぞれはどのファイルですか？
下にそれぞれのファイル名をまとめました。よろしくお願いいたします。
あなたの回答
tips
プレビュー
