Vue.js のコンポーネント内に記述したスタイルが本番環境で適用されない

Question

前提・実現したいこと

Vue.jsとRuby on Rails を使用して、webサイトを作成しています。
本番環境にてコンポーネントファイルに記述したスタイルが反映されません。
script部分は問題なく動作します。
コンポーネントファイル以外app/assets/stylesheetsのスタイルは反映されています。
ローカル環境では、スタイルは反映されます。
対処方法ご存知の方見えましたらご教授願います。

発生している環境

AWS
Rails バージョン ５.２.３
Nginx
unicorn
Vue.js

コンポーネントファイル一例

<template>  
  <div id="form">
    <hr />
    <h2 class="form-h2">"{{book.title}}" が好きな理由</h2>
    <!-- <BookInfo :book="book"></BookInfo> -->
    <div class="emotion-list">
      <div class="emotion-list__view">
        <div class="emotion-list__view__data">
          <img v-if="book.image.length != 0" :class="{ linkable }" :src="book.image" class="data__image"/>
          <img v-else :class="{ linkable }" src="../../assets/noimage.png" class="data__image"/>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <div class="data">
              <div class="title">
                <div class="readed_at">
                  <span class="date-label">読了日</span>
                  <el-date-picker type="date" v-model="form.read"></el-date-picker>
                </div>
              </div>
            </div>
            <div class="lead">
                <el-form-item prop="memo">
                  <p class="lead">この本が好きな理由</p>
                  <el-input type="textarea" maxlength="200"
                    resize="none" v-model="form.memo"></el-input>
                </el-form-item>
                <div class="tag-btn">
                  <el-input type="text" maxlength="8"
                      resize="none" v-model="form.tag" class="emotion-tag" placeholder="タグ付け(感動,シリアス)"></el-input>
                  <el-button type="primary" @click="createBook" class="emotion-btn">登録</el-button>
                </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.el-form-item{
  margin-bottom: 0px !important;
}

.el-form-item__content{
  margin-left: 0px !important;
}

.el-form{
  padding: 0 30px;
}

.el-textarea{
  height: 200px;
  width: 400px;
}

.el-textarea__inner{
  height: 200px;
  width: 400px;
  resize: none;
  padding: 0 12px;
  border-radius: 5px;
  background-color: rgba(238, 238, 238, 0.1);
}

.el-input__inner{
  width: 220px !important;
}
</style>

<style scoped>

.form-h2{
  padding: 20px 40px;
  font-size: 38px;
  font-weight: bold;
}

.emotion-list{
  word-wrap:break-all;
  display: flex;
  margin: 0 0 20px 0;
}

.emotion-list__view{
  padding: 20px 70px 40px 40px;
}

.emotion-list__view__data{
  display: flex;
  position: relative;
  width: 150%;
}

.data__image{
  width: 186px;
  height: 276px;
}

.lead{
  font-size: 18px;
  width: 400px;
}

.tag-btn{
  display: flex;
  margin-top: 5px;
}

.emotion-tag{
  width: 60px;
}

.emotion-btn{
  margin-left: 270px !important;
}

</style>

###Nginx設定ファイル rails.conf

upstream app_server {
  server unix:/var/www/<アプリケーション名>/tmp/sockets/unicorn.sock;
}
server {
  server_name <Elastic IP>;
  root /var/www/<アプリケーション名>/public;
  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }
  try_files $uri/index.html $uri @unicorn;
  location @unicorn {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://app_server;
  }
  error_page 500 502 503 504 /500.html;
}

試したこと

Production.rbを下記の様にしてデプロイしてみましたがダメでした。

config.public_file_server.enabled = true

Answer 1

railsのビュー側の

%router-view

を記載している箇所に下記記述したらいけました????

= stylesheet_pack_tag 'main'

Answer 2

RAILS_ENV=production rails assets:precompile
しましたか？
その後で サーバ再起動しましたか？

Comments

[RubtMDqy2op3pZh]

はい
RAILS_ENV=production rails assets:precompile実施したのち
unicorn nginx起動しています
????

[winterboum]

nginx ではなく、pumaとかunicornの方です

[RubtMDqy2op3pZh]

はい
unicornも再起動しています????