web-dev-qa-db-ja.com

VueJSコンポーネント間で共通のCSSを共有する

私はVueJS 2プロジェクトに取り組んでおり、コードを整理しようとしていますが、スコープ付きのスタイル設定に苦労しています。

これが私の要件です。 :)

私は互いに非常によく似た3つのコンポーネントを持っているので、mixinsを使用してコードを1つのファイルにマージすることにします。各コンポーネントは、mixinsとtemplateの両方のvuejsを使用します。特定のコンポーネントの条件をカスタマイズしたい場合は、そのコンポーネントのコードをオーバーライドするだけで、この部分で問題なく機能します。

しかし、私がもっとやりたいことの1つは、scoped styleもミックスインに。現時点では、スタイルは<style lang="scss" scoped></style>タグとこのスタイルはコンポーネントで非常にうまく機能しますが、スタイルコードを3つのコンポーネントすべてに複製する必要があります。

これらのスタイルをグローバルcssファイルに追加できることはわかっていますが、一部のスタイルをグローバルスコープにしたくありません。これらの3つのコンポーネントの1つだけがこれらに適用されます。

これらのスタイルを追加してミックスインに適用する方法はありますか？

この特定のケースをコーディングするためのベストプラクティスは何ですか？

cssvue.jsscopevuejs2mixins
13
spicydog

scoped styleは、子コンポーネントにも影響します。

したがって、私は解決策を見つけましたが、それがベストプラクティスであるかどうかはわかりませんが、私はそれについて非常にいいと感じています。

WrapperComponentを作成し、scoped styleここと小さなテンプレート。

<template>
    <div>
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
    /* css style that will apply to all children */
</style>

ここで何が起こるかというと、このWrapperComponentを使用してコンポーネントをラップすると、テンプレートはslotを介してHTMLを渡し、変更を加えずにスタイルを適用できるようになります。

mixinsでは、このラッパーをインポートし、コンポーネントテンプレートをWrapperComponentでラップします。以下がその例です。

import WrapperComponent from './WrapperComponent'

let MyMixins = {

    template: `<wrapper-component>
        <div>
            Whatever HTML code here
        </div>
    </wrapper-component>`,


    components: {
        WrapperComponent,
    },
};

このmixinsまたは子コンポーネントを使用すると、WrapperComponentのスタイルが自動的に適用され、同じ親スタイルを使用するコンポーネントの他のグループでも使用できます。

2
spicydog

おそらく、スコープ属性を持つstyleセクションを設定する代わりに、モジュールを使用します。

https://vue-loader.vuejs.org/en/features/css-modules.html

このようにして、CSSは引き続きスコープされ、グローバルスタイルの一部にはなりません。

2
Stephan-v