前提・実現したいこと

Rails-Vueで
RailsプロジェクトでバックエンドRails フロントエンドVueのノートアプリ作成。

発生している問題

Rialsプロジェクト内でVueファイルを表示させたら
ローカル環境ではCSSが反映しますが、本番環境（heroku）では文字やテキストボックス
は表示されるもののCSSが効きません。
本番環境でもローカル環境と同様のCSSを反映したくご指導をお願いします。

ローカル環境での表示（CSSが反映）

本番環境（CSSの反映なし）

railsプロジェクト内/app/javascript/app.vue

該当のソースコード

Vue.js
1<template>
2  <div id="app">
3    <div class="contents">
4      <div>
5        <input v-model="title" class="text1">
6      </div>
7      <div>
8        <input v-model="mainText"  class="text1">
9      </div>
10      <button @click="addnote">追加</button>
11      <div v-for="note in notes" :key="note.id">
12        <div class="box">
13          {{ note.id}}.{{ note.title }}<br />
14          {{ note.mainText }}
15          <button @click="deletenote(note.id)">delete</button>
16        </div>
17      </div>
18    </div>
19  </div>
20</template>
21
22<script>
23import axios from 'axios';
24export default {
25  data: function () {
26    return {
27      notes: "notes",
28      title: '',
29      mainText: '',
30      id:''
31    }
32  },
33  mounted () {
34    this.setnote();
35  },
36  methods: {
37    setnote: function () {
38      axios.get('/api/notes')
39      .then(response => (
40        this.notes = response.data
41      ))
42    },
43    addnote: function() {
44      axios.post('/api/notes', {
45        title: this.title,
46        mainText: this.mainText
47      })
48      .then(response => (
49        this.setnote() 
50      ));
51      this.title = ''
52      this.mainText = ''
53    },
54    deletenote: function(id) {
55      var res = confirm("削除してもいいですか？");
56      if( res == true ) {
57        axios.delete(`/api/notes/`+ id)
58        .then(res => {
59          this.setnote()
60        });
61      }
62    }
63  }
64}
65</script>
66
67<style>
68.contents{
69  width:80%;
70  min-height:300px;
71  color : #000000;
72  margin-right: auto;
73  margin-left : auto;
74  margin-top:1.5%; 
75  margin-bottom: 1.5%;
76  font-size: 16px;
77  line-height: 1.5em;
78  border-radius: 15px;
79}
80.text1{
81    margin-top:0.8em;
82    width: 100%; 
83    padding: 10px 15px;
84    font-size: 16px;
85    border-radius: 3px; 
86    border: 2px solid #ddd; 
87    box-sizing: border-box; 
88
89.box {
90    padding: 0.5em 1em;
91    margin: 0.3em 0;
92    margin-top:0.2em;
93    background: #FFF;
94    border: solid 3px;
95    border-radius: 10px;
96}
97.box p {
98    margin: 0; 
99    padding: 0;
100}
101</style>

試したこと

app/views/layouts/application.html.erbを以下のように修正します。

修正前

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
↓
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
デプロイできなくなったので取りやめ

ビルドパックの追加
$ heroku buildpacks:add --index 1 heroku/nodejs
実施しましたが、変化なし

補足情報（FW/ツールのバージョンなど）

herokuデプロイまでのコマンド
git add .
git commit -m "first-deploy"
git push heroku master
でデプロイしてます

行動規範の内容に同意します

回答2件

自己解決

上記で解決しました。
<%= stylesheet_pack_tag 'hello_vue' %>を追加

投稿2021/10/22 02:39

Sibutakiti

総合スコア18

本番でも<style></style>でページ内にCSSを書いてありますか？
それなら、本番でもCSSスタイルが当てると思います。

chromeのdevtoolsのelementsタブで確認してみてください。

ただ、普通はCSSをassets precompileなどでコンパイルして、public/assetsフォルダへ出力されます。

layoutファイルの設定

<%= stylesheet_link_tag "application", media: "all" %>

本番ではこのようなCSSが読み込まれます。

https://www.your_domain.com/assets/application-xxxx.css

投稿2021/10/15 06:57

heroyct

総合スコア434

Sibutakiti

2021/10/22 02:37

ご回答ありがとうございます。コンソールを確認しましたがCSSの反映はなし。改めてググったところ、下記で解決しました。 https://github.com/rails/webpacker/issues/987 /app/views/home/index.html.erb に<%= stylesheet_pack_tag 'hello_vue' %> を追加してデプロイすればCSSも反映しました。 <%= javascript_pack_tag 'hello_vue' %> <%= stylesheet_pack_tag 'hello_vue' %> 参考にしたサイト https://qiita.com/hogehoge1234/items/b08d0f8ead987a452eb5 https://github.com/rails/webpacker/issues/987

行動規範の内容に同意します

あなたの回答