[Vue] Build後、bodyのbackground-colorが#fffになってしまう

Question

環境

Vue CLI 2x

現象

npm run dev時

body{ background: #F4EFE7; }

ローカル環境

npm run build時（firebaseデプロイ）

body{ background-color: #fff; }

不明：　「#F4EFE7」の方のスタイルより#fffのbodyスタイルが後に読み込まれてしまっている
あと<a>タグのスタイルも変わってしまっています。

App.vue

<template>
  <div id="app">
    <div class="header">
      <router-link to="/">
      <div class="logo-title">
        <div class="font-12">Designer</div>
        <div class="font-20">Daisuke Mori</div>
      </div>
      </router-link>
      <ul class="font-15">
        <li><router-link to="/">Top</router-link></li>
        <li><router-link to="/product">Works</router-link></li>
      </ul>
    </div>

    <router-view />
    <Form />

    <div class="footer">
      <p id="page-top"><a href="#wrap"><img src="@/assets/img/pagetop.png"></a></p>
      <div class="detail">
        <div class="font-20">Detail</div>
        <div class="font-13">Adobe　Illustrator / Photoshop / Indesign / XD / AfterEffects</div>
        <div class="font-13">Web　HTML / CSS / PHP / Laravel / CakePHP / Javascript / Vue / React</div>
        <div class="font-13">Mobile　React Native</div>
      </div>
      Copyright© 2020 Dai Portfolio All rights reserved.
    </div>
  </div>
</template>

<script>
  // 認証関連
  import firebase from 'firebase'
  import Form from '@/components/Form.vue'

  export default {
    name: 'App',
    components: { Form },
    mounted: function() {
      // fadein
      $(window).scroll(function (){
          $('.fadein').each(function(){
              let targetElement = $(this).offset().top;
              let scroll = $(window).scrollTop();
              let windowHeight = $(window).height();
              if (scroll > targetElement - windowHeight + 200){
                  $(this).css('opacity','1');
                  $(this).css('transform','translateY(0)');
              }
          });
      });
      // ページTOPに戻る
      let topBtn = $('#page-top');    
      topBtn.hide();
      //スクロールが100に達したらボタン表示
      $(window).scroll(function () {
          if ($(this).scrollTop() > 100) {
              topBtn.fadeIn();
          } else {
              topBtn.fadeOut();
          }
      });
      //スクロールしてトップ
      topBtn.click(function () {
          $('body,html').animate({
              scrollTop: 0
          }, 500);
          return false;
      });
    }
  }
</script>

<style>
  @import url('https://fonts.googleapis.com/css?family=Parisienne&display=swap');
  @import url('https://fonts.googleapis.com/css?family=PT+Serif:400i|Parisienne&display=swap');
  /* font-family: 'Parisienne', cursive; */
  /* font-family: 'PT Serif', serif; */
  * {
    font-family: 'PT Serif', serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body, html {
    background: #F4EFE7;
  }
  /* フォントサイズ定義 */
  .font-12 {
    font-size: 12px;
  }
  .font-13 {
    font-size: 13px;
  }
  .font-15 {
    font-size: 15px;
  }
  .font-18 {
    font-size: 18px;
  }
  .font-20 {
    font-size: 20px;
  }
  .font-23 {
    font-size: 23px;
  }
  .font-25 {
    font-size: 25px;
  }
  .font-30 {
    font-size: 30px;
  }
  .fadein {
    opacity : 0;
    transform: translateY(20px);
    transition: all 1s;
  }
  #page-top img {
    display: block;
    width: 50px;
    height: 50px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: .5s;
    right: 50px;
    bottom: 50px;
    position: fixed;
  }
  #page-top a:hover {
      opacity: .5;
  }
  h1, h2 {
    font-family: 'Parisienne', cursive;
    font-weight: normal;
    margin: 0 0 15px 0;
  }
  a {
    text-decoration: none;
    color: #312312;
  }
  ul li {
    list-style: none;
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    height: 90px;
    margin: 0 auto;
    padding: 30px;
    background: #D6C6B4;
  }
  .header .logo-title {
    line-height: 1.25em;
  }
  .error {
    color: #ff7bb6;
  }
  .header ul li {
    display: inline-block;
    margin: 15px 0 0 10px;
  }
  .router-link-exact-active {
    color: #312312;
  }
  .container {
    text-align: center;
    width: 100%;
    margin: 75px auto 50px;
  }
  .footer {
    text-align: center;
    font-size: 10px;
    margin: 0 0 30px 0;
  }
  .footer .detail {
    margin: 0 0 30px 0;
  }
</style>

Comments

[shgtkshruch]

ProductList.vue というファイルがあると思うのですが、そのファイルのコードも貼っていただけますか？

また、ローカル環境とFirabseで開いている画面が異なる（ルーティングが違う）ように見えますが、ローカル環境と同じ画面をFirabaseで開いてもbodyのbackground-colorは#fffになっていますか？

[DaisukeMori]

すみません。ページをローカルと同じページにしましたので
よろしくお願いします。

[shgtkshruch]

bodyにbackground-color:#fffが設定されているのは、ご自身で定義したスタイルでしょうか？（それともライブラリ？）
もしわかるのであれば、このスタイルを定義したファイル名とそのコードがあるともう少し調査できるかもしれません。

[DaisukeMori]

子コンポーネントまで記入しようとすると文字オーバーになるため親コンポーネントのApp.vue載せました。

Answer 1

App.vueに定義したスタイルがbuild時に何らかの原因で書き換わってしまうことは
まだ不明ですが、Vueフォルダのルート直下にあるindex.htmlにスタイルを直書きすれば行けるのではと仮説を立てて試しにこちらで定義してみたら無事スタイルが適用されました。

/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-basic</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->

    <!-- こちらにスタイルを直書き -->
    <style>
      body {
        background: #F4EFE7;
      }
      a {
        text-decoration: none;
        color: #312312;
      }
    </style>
  </body>
</html>