Sass @useで別ファイルのmixinを呼び出す方法
解決したいこと
Sassを勉強し始めてWebサイトの制作をしているのですが、
別ファイルにあるmixnを呼び出そうとしてもエラーが出てしまい、
エラーの箇所を確認してもおかしいところがわかりません。
解決方法を教えていただけると幸いです。
階層はこのような形です。
┣ index.html
┣ css
┃ ┗ style.css
┣ sass
┃ ┣ style.scss
┃ ┗ _button.scss
┣ js
┗ img
発生している問題・エラー
Error: Invalid CSS after "...@include button": expected "}", was ".button_inside(64px"
on line 190 of
〜〜〜sass/style.scss
>> @include button.button_inside(64px, 0.1em);
-----------^
Error: @use rules must be written before any other rules. ╷ 187 │ @use "button"; │ ^^^^^^^^^^^^^ ╵
該当するソースコード
style.scss
@use "button";
.button_about {
@include button.button_inside();
}
_button.scss
// -----
// ボタン
// -----
//カラー
$color-main: #c8e4b3;
$color-accent: #eeeccd;
$color-text: #675e55;
// ボタン内の余白
$btn_padding: 59px 0;
@mixin button_inside() {
display: inline-block;
font-size: 24px;
text-decoration: none;
margin: 0;
background-image: linear-gradient(140deg, $color-main, $color-accent);
border-radius: 115px;
min-width: 180px;
color: $color-text;
position: relative;
text-align: center;
padding: 19px 0;
}
自分で試したこと
191行目を確認→どこがおかしいのかわからない
@use "button";をstyle.scssの一行目に書いてみる→変わらない
初心者で、こちらで質問するのも初めてなため説明不足かもしれませんが、どうかよろしくお願いします。
0 likes
