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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

2回答

381閲覧

VueコンポーネントでCSSが当たりません

ryoma510

総合スコア29

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2017/10/22 05:08

エラー内容
ruby on rails の中でvue.jsを使っています。
しかし、コンポーネントファイルの中でデータバインディングはできるのに、なぜかCSSだけ当たってくれません。

いろいろ調べたのですが、原因が全くわからず困っています
誰か教えていただけると幸いです。

詳細なエラー内容は以下になります

ファイル

index.html.erbのファイルの中でvueを使っています

<div class="js-tasks-index"> <app-switch/> </div> <%= javascript_pack_tag 'tasks/index' %>

tasks/index.jsの中でコンポーネントapp-switchの登録をしています。

import Vue from 'vue/dist/vue.esm'; import Switch from '../components/Switch'; new Vue({ el: '.js-tasks-index', components: { 'app-switch': Switch } });

app-switchコンポーネントのファイルがこれです。

<template> <div class="switch-container"> <div class="undone">未処理</div> <div class="doing">作業中</div> <div class="done">{{state}}</div> </div> </template> <script> export default { data () { return { state: '完了' } } } </script> <style> div { background-color: blue; } </style>

データバインディングはできていて、{{state}}の表示はうまくいっているのですが、<style></style>の中のCSSが当たっていません。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

vueのバージョンはいくつですか?

あと、app-switchコンポーネントのファイル名はなんて付けてますか?

投稿2017/11/10 00:38

tashua314

総合スコア145

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryoma510

2017/11/12 06:22

回答ありがとうございます。 vue は 2.5.2 app-switchコンポーネントのファイル名は Switch.vueです
guest

0

Railsのバージョンは5系でしょうか?
5系でしたら

config/webpack/development.js

に以下を追記すれば動くのではないかと

environment.loaders.get('vue').options.extractCSS = false

投稿2017/10/25 07:35

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryoma510

2017/10/25 10:56

回答ありがとうございます。 指摘いただいた通りしたのですが、治りませんでした。 エラーメッセージも吐かれない上に、ググっても同じエラーがでないので困っています・・ どこらへんを調べればでてきそうなど、検討つきますでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問