お世話になっております。Sassのmixinを用いてフロントを実装しているのですが、サーバー立ち上げ時に特定のコードの読み込みができないエラーが発生します。アドバイス頂ければ幸いです。
解決したいこと
サーバー立ち上げ時に、Error: no mixin named selectboxが出力されるエラーを解消したい。
詳細
開発環境だが、サーバー立ち上げ時に、特定ファイルでError: no mixin named selectboxが出力される。
しかし、@includeで使用しているコードをコメントアウト⇨リロード⇨コメントアウトを解除⇨リロードという手順でエラーが解決され、scssファイルも読み込みされる。
その他mixinで定義しているファイルはあるが、エラーは出ない。
- エラー詳細
Error: no mixin named selectbox on line 2:12 of app/assets/stylesheets/_new_profile.scss >> @include selectbox();
※@include selectbox();をコメントアウト⇨リロード⇨コメントアウトを解除⇨リロードとすると、エラーがでなくなる。
環境
- Rails 6.0.3.1
- ruby 2.7.1
- gem "haml-rails", "~> 2.0"
- gem 'font-awesome-sass', '~> 5.13.0'
関連コード
application.html.haml
!!! %html %head %meta{content: "text/html; charset=UTF-8", "http-equiv": "Content-Type"}/ %title app_name = csrf_meta_tags = csp_meta_tag = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %body = yield
application.scss
@import "reset"; @import "global"; @import "font-awesome-sprockets"; @import "font-awesome"; @import "mixin"; @import "modules/user-reg"; @import "variable"; @import "header"; @import "nav"; @import "flash"; @import "main"; @import "footer"; @import "new_profile";
mixin.scss
@mixin fields() { width: 520px; font-size: 16px; margin: 0 auto; margin-top: 40px; font-weight: 200; } @mixin textbox() { height: 66px; width: 100%; font-size: 16px; margin-top: 10px; font-weight: 400; border: solid 1px #EBEBEB; border-radius: 4px; } @mixin selectbox() { height: 66px; width: 50%; margin-top: 10px; font-weight: 400; border: solid 1px #EBEBEB; border-radius: 4px; }
_new_profile.scss
#profile_job, #profile_practice_time{ @include selectbox(); // Error: no mixin namedが } .form-experience{ position: relative; &__year{ position: absolute; right: -30px; top: 60px; } }
modules/_user-reg.scss(@includeを利用しているが、エラーが出ない)
.user-reg-main{ width: 100%; &__form{ width: 700px; margin: 0 auto; background-color: #fff; } } .user-reg-wrapper{ padding-bottom: 50px; background-color: #F9F9F9; } .user-reg{ height: 120px; width: 100%; background: #FFFC0E; // margin-bottom: 50px; display: flex; align-items: center; justify-content: center; &__title{ font-size: 30px; } } .field{ @include fields(); &--1{ @include fields(); } } .text-space{ @include textbox(); &--detail{ @include textbox(); height: 120px; } } .label-reg-profile{ font-size: 16px; font-weight: 200; &--1{ display: inline-block; padding-top: 50px; } } .actions-reg{ @include fields(); text-align: center; &__btn{ height: 66px; width: 100%; margin: 10px 0 50px 0; font-weight: 400; border: solid 1px #EBEBEB; border-radius: 4px; cursor: pointer; } } .form-require { padding: 2px 4px; width: 40px; border-radius: 2px; color: red; font-size: 12px; } .error{ margin-top: 10px; list-style: none; &__message{ color: red; } }
あなたの回答
tips
プレビュー