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

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

ただいまの
回答率

87.49%

【Sass】サーバー立ち上げ時に 、特定ファイルの@includeが使用できない(Error: no mixin named)

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 701

score 9

お世話になっております。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;
  }

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る