vue.jsアプリでCSSを使うには？

CSSでサイトを構築する方法を正確に理解するのに問題があります。私は各コンポーネントに独自のCSSがあることを知っていますが、すべてのコンポーネントでこれを行う必要がありますか？もしコンポーネントがたくさんのCSSを持っていて巨大であれば？vue.jsアプリでCSSを使うには？

私はvue.jsで構築されたいくつかのサイトを見てきましたが、大量の内部スタイルブロックを持つapp.cssファイルなどの外部CSSファイルがあります。

私は自分の/stylesディレクトリにSassのサイトを構築し、compass.appを.scssファイルを.cssファイルにコンパイルして使用しています。

は、ここでコンポーネントのCSSブロックの例です：それは千+ライン何を

<style lang="scss"> 
h1, h2 { 
    font-weight: normal; 
} 
ul { 
    list-style-type: none; 
    padding: 0; 
} 
li { 
    display: inline-block; 
    margin: 0 10px; 
    a { 
    color: red; 
    } 
} 
</style>

した場合は？私はそれを外部のscssファイルに移動することができますか？これはどのように機能しますか？

ありがとうございました。

出典

2017-12-13 kinx

あなたのスタイリングが単一のコンポーネントのために長すぎる場合、おそらくコンポーネントは再利用可能な小さなコンポーネントに分解される可能性がありますか？ – Dean

ブートストラップのようなスタイルのグローバルリストや、各コンポーネントで使用したい一般的なスタイルを持っている場合は、グローバルにしてapp.vueやアプリケーションのエントリポイントでそれを必要とします。そうでなければ、それはそれ自身のコンポーネントであることにも意味があり、また@Deanは真実であると言いました。 – samayo

これはわかりました。だから、別のCSSファイルではなく、100スタイルのブロックを持つことは大丈夫ですか？なぜなら、私は、正当な理由ときれいなコードと、より小さなHTML文書であると思っていたために、私は常に別のファイルに自分のスタイルを持っていたからです。 – kinx

あなたの懸念は、あなたがコンポーネントにカスタムCSSコードを持っていて、そこに書いているスタイルは唯一、そのコンポーネントに適用されますので、スコープの属性を追加することができ、コードの分離についてです場合：また、あなたの場合は今

<style lang="scss" scoped> 

    /* your scoped css rules here will only apply to this component */ 

</style>

すべてのコンポーネントからCSSをコンパイルしてメインHTMLファイルからリンクする単一の最終CSSファイルにマージしたい場合は、webpackなどのバンドル/コンパイラを追加する必要があります

また、 vue css-loaderでCSSルールをモジュール化して構成する方法を理解してください。

出典

2017-12-13 17:36:05

vue.jsアプリでCSSを使うには？

答えて

関連する問題