VUEでエクスポートデフォルトのスタイルを構成する方法

vue export default> in オブジェクト内の

オプションを使用すると、コンポーネント内にCSSを直接​​埋め込むことができます。 このCSSはデフォルトでコンポーネントにスコープされます。つまり、アプリケーションの他の部分には影響しません。 例は次のとおりです。この例では、この例では、アプリケーションの他の場所に適用されている他のスタイルに関係なく、export defaultタグには常に青色のテキストがあります。 複数のスタイルブロックを含めることができますが、styleexport default

<code class="javascript">export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, world!'
    };
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `,
  style: `
    p {
      color: blue;
    }
  `
};</code>

>

p> MyComponentscopedスタイルを

export default

export defaultscopedを使用して、style

<code class="javascript">export default {
  // ... other component options ...
  style: `
    p {
      color: blue; /* This style is scoped */
    }
  `
};</code>

を使用して、

を使用してVueコンポーネント内のCSSスタイルをスコープすることができます。この属性は、コンポーネントのルート要素に一意の属性を自動的に追加し、スタイルがその特定のコンポーネントインスタンスにのみ適用されるようにします。 これにより、スタイルの競合が防止され、より優れたCSS組織が促進されます。

<code class="vue"><style scoped>
  p {
    color: blue;
  }
</style></code>

これは、<style scoped> data-v-xxxx

export default

タグ内で、ブラウザはコンポーネントのルート要素とその子供に一意の属性（通常はexport default）に自動的に追加されます。 CSSセレクターは、その特定の属性を持つ要素のみをターゲットにします。 これは、カプセル化を維持し、競合を防ぐためのスタイリングコンポーネントの推奨アプローチです。

1. styleオプション（スコープ）内のインラインスタイル：上記のように、これは最も簡単な方法です。 コンポーネントの定義内でスタイリングを直接保持します。 scopedタグを使用するか、Webpackなどのモジュールバンドラーを使用する場合はコンポーネントのスクリプトセクション内のインポートステートメントを使用します。 この方法
は
2. 。 CSSモジュールをコンポーネントにインポートすると、生成されたクラス名を介してスタイルが自動的にスコープされます。 この方法は。。 コンパイルされたCSSは、<link>オプション内で使用するか、外部スタイルシートとしてインポートします。 ただし、アプリケーションが実行される前に、SASS以前にSASS以前のファイルをCSSに前処理するように構成されたビルドプロセス（WebPackやViteなど）が必要です。たとえば、SASSを使用する場合、通常、スタイルをAファイル（例えば、）に書き込み、ビルドプロセスをCSSに締めくくります。 次に、コンパイルされたCSSファイルをVUEコンポーネントのstyleオプション内にインポートするか、CSSモジュールアプローチを使用します。構成）：export default
3. mycomponent.scss： styleexport default
mycomponent.vue：
4. style

export default

タグの属性は、SASS Pre-Procestorを使用するためのビルドプロセスを伝えます。

ステートメントは、コンパイルされたCSSをexport defaultからインポートします。 このセットアップでは、SASS以下のファイルを正しく処理するようにビルドプロセスを構成する必要があることを忘れないでください。 適切な構成がなければ、プリプロセッサコードはコンパイルされず、エラーにつながります。

以上がVUEでエクスポートデフォルトのスタイルを構成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。