前提・実現したいこと
Vue CLI 3(vue create xxx
)を用いて作成したプロジェクト内で、
CSSフレームワークのBuefy(vue + Bulma)を使用し、期待通り当りのスタイルを実現したいと考えています。
発生している問題・エラーメッセージ
現在、views以下のHome.vue, About.vue内で単純なhtml, cssのコーディングを行っており、
Buefyのサンプルをコピペ+その要素にclassを付与して、スタイルをあてていました。
その後、styleにscopedを付与したところ、Buefyから持ってきた要素上に.control
や.is-clearfix
等のクラスが付与されており、
以前は当たっていたスタイルが当たっている部分、当たっていない部分ができてしまいました。
(例えば、Buefyのinputに付属しているlabel要素に付与されているclassは.labelのままだったのですが、以前.labelに当てていて期待通り動作していたスタイルが当たらなくなってしまいました。)
scoped追加後、具体的には以下の要素に下記のようなclassが付与されていました。
・labelには
label
・b-selectには
is-empty
・b-input要素には
control
is-clearfix
現在はHome.vueのstyleタグにはscopedを指定し、About.vueのstyleタグにはscopedを指定していません(後で気づいたため)
scopedをつけなければ競合してしまうstyleがあるため、各ページのstyleタグにscopedを指定したいと思っています。
また、styleにscopedを付与しないことで、scoped有りの時には動作しているページ内のrouter-linkが動作しなくなってしまい、こちらも困っています。
具体的な質問
- Vue CLI 3を使用して作成したプロジェクトでCSSフレームワークを使う際、styleタグにscopedをつけるとclassが当たらなくなってしまう要素があり、その挙動への対処方法
- styleタグにscopedを付与するとrouter-linkによる画面遷移が動作しなくなることに対する対処方法(scopedをつけなければ正常通り動きます)
- そもそもですが、CSSのフレームワークから持ってきた要素に、classを付与してスタイルを上書きするのは正しいことなのでしょうか?それなら、はじめから自分でスタイルを作ったほうがいいのではないか、とも思っています。
上記に関して、なにかアドバイス等いただけますでしょうか。
よろしくお願いいたします。
ディレクトリ構成
ディレクトリ構成は以下ですが、vue create xxx
で作成したものから構成に関してはほとんど変わっていません。
変更点として、グローバルCSSとしてcommon.css
やreset.css
を読み込んでいます。
該当のソースコード
views/About.vue
以下はstyleタグにscopedを付与していないため、指定しているスタイルが当たっている状態です。
scopedを付与したところで、classが追加されスタイルが当たらなくなってしまいます。
<template> <section class="about"> <div class="container"> <form action="#" class="form"> <div class="input__item-wrapper"> <!-- Buefy Input --> <b-field label="インプット" class="input__item"> <b-input v-model="name" class="input"></b-input> </b-field> <!-- Buefy Select --> <b-field label="セレクト" class="input__item"> <b-select placeholder="Select a name"> <option v-for="option in data" :value="option.id" :key="option.id" >{{ option.document }}</option > </b-select> </b-field> </div> </form> </div> </section> </template> <script> export default { name: "home", data() { const data = [ {document: "doc1"}, {document: "doc2"}, {document: "doc3"} ]; return { data, name }; } }; </script> <style> <!-- 例ですが、以下のようなスタイルが当たらなくなります --> .label { color: #fff; font-size: 1.6rem; } .input { padding: 20px 0; width: 200px; height: 30px; padding: 0; text-indent: 8px; font-size: 1.4rem; } select { width: 200px; padding: 0; text-indent: 8px; padding: 20px; } </style>
試したこと
グローバルのcssが影響しているのかと思い、すべてコマンドアウトしてみましたが関係なさそうでした。
styleタグににscopedを付与したのち、新たに追加されていたclassにスタイルを当ててみましたが、当たるもの、当たらないものがありました。
補足情報(FW/ツールのバージョンなど)
"buefy": "^0.7.2", "vue": "^2.5.22", "vue-router": "^3.0.1"
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。