vue-cli3 パッケージングスタイルの不整合-フロントエンドQ&A-php.cn

vue-cli3 パッケージングスタイルの不整合

WBOY

リリース： 2023-05-24 10:46:06

オリジナル

722 人が閲覧しました

フロントエンド開発で Vue.js が広く使用されるようになったことで、多くの開発者が Vue CLI 3 を使用して Vue プロジェクトを管理し、Webpack を使用して実稼働環境用にプロジェクトをパッケージ化するようになりました。ただし、Vue CLI 3 パッケージを使用すると、スタイルの不整合の問題が発生する可能性があります。この記事では、これらの問題を解決する方法について説明します。

依存関係のバージョンを確認する

Vue CLI 3 および Webpack を使用してパッケージ化する場合は、すべての依存関係のバージョンが最新であり、Vue CLI の要件を下回っていないことを確認してください。。コマンド

vue --version

ログイン後にコピー

を使用して Vue CLI のバージョンを確認し、インストールされているバージョンが 3.x.x であることを確認します。

同時に、npm または Yarn を使用して依存関係をインストールする場合は、必ず最新バージョンのパッケージ、特に CSS やスタイルに関連するパッケージ (sass-loader、css-loader など) を使用してください。

CSS プリプロセッサ設定の確認

Vue CLI 3 は、デフォルトで CSS プリプロセッサとして scss を使用します。 less や stylus などの別の CSS プリプロセッサを使用し、それがプロジェクト構成で正しく設定されていない場合、スタイルの位置がずれる可能性があります。したがって、CSS プリプロセッサが vue.config.js ファイルで正しく構成されていることを確認してください。例:

module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 使用less的变量
        modifyVars: {
          // 或者您想使用jQuery和Bootstrap等的cdn链接
          'jquery':'jquery',
          'moment':'moment',
          'i18n':'vue-i18n',
          'bootstrap':'https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css',
        }
      }
    }
  }
}

ログイン後にコピー

この例では、less というオプションを追加し、modifyVars を使用して Less 変数 Passed を変更しています。コンポーネントファイルに追加します。 Vue CLI 3 で CSS プリプロセッサを適切に設定することで、スタイルの不整合の問題を解決できます。

グローバルスタイルを使用するかどうかを確認する

Vue プロジェクトでは、グローバルスタイルを使用してコンポーネントに適用できます。グローバルスタイルで独自の CSS セレクターを使用すると、CSS セレクターが定義されている DOM 要素に Vue コンポーネントが含まれる可能性があるため、スタイルの不整合の問題が発生する可能性があります。

この問題を解決するには、CSS スコープを使用してコンポーネントのスタイルを制限します。これを行うには、Vue 単一ファイルコンポーネントでタグを使用して、CSS スタイルを現在のコンポーネントにのみ適用するように制限できます。

<template>
  <div>
    // ...
  </div>
</template>

<script>
// ...
</script>

<style scoped>
  /* 在这里定义组件的样式 */
</style>

ログイン後にコピー

スコープ付きタグを通じてスタイルを宣言すると、現在のコンポーネント内でのスタイルの使用が制限されるため、グローバルスタイルの汚染や他の要素によってコンポーネントスタイルが導入されることが回避されます。

セレクターの優先順位の競合があるかどうかを確認してください

Vue CLI 3 でパッケージ化する場合、一部の CSS セレクターが常に他のセレクターによってオーバーライドされることに気づくことがあります。これにより、次のような問題が発生する可能性があります。スタイルのズレに。

これは通常、セレクターの優先順位の競合によって発生します。 Vue コンポーネントでは、優先順位は次の要素によって決まります:

a) 要素セレクター

b) 同じセレクタールールでは、後で宣言されたものが上書きされます。最初に宣言されたもの

# したがって、Vue コンポーネント内で同じ優先度を持つ同じセレクターを使用すると、後で定義されたセレクターが最初に定義されたセレクターを上書きします。

この問題を解決するには、より具体的な CSS セレクターを使用して、優先順位を上げ、他のセレクターによって簡単にオーバーライドされないようにすることができます。

他の CSS 競合があるかどうかを確認します

最後に、Vue プロジェクトが他の CSS ファイルと競合するかどうかを確認する必要があります。これは、コンポーネントで使用している CSS ルールが他のファイルのルールと競合していることが原因である可能性があります。

これを回避するには、CSS ルールでより具体的なセレクターを使用します。 BEM (Block Element Modifier) や ITCSS (Extensible Composable CSS Classes) など、さまざまな CSS 命名規則を使用してみることもできます。

同時に、競合を避けるために、スコープ付きスタイルを使用してコンポーネントにスタイルを埋め込むか、CSS モジュールやスタイル付きコンポーネントなどの JS ソリューションで CSS を使用することを試みることができます。

概要:

上記は、依存関係のバージョンの確認、CSS プリプロセッサの設定の確認、グローバルスタイルの使用、セレクターの優先順位の競合の確認、およびその他の CSS の競合の確認によって、Vue CLI 3 パッケージ化の問題を解決するものです。スタイル脱臼の方法。これらの方法は、他の Web アプリケーションの Webpack パッケージ化に関連するスタイルの問題にも適用できます。これらの方法が、開発プロセス中に同様の問題を解決するのに役立つことを願っています。

以上がvue-cli3 パッケージングスタイルの不整合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。