VueWebpackローダーをカスタマイズする方法

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

Vueの最もユニークな機能の1つは、.vue単一ファイルコンポーネントに他の言語とプリプロセッサが組み込まれていることです。これにより、利用可能なWebpackローダーがあれば、好きなプリプロセッサを使用できます。多くの場合、デフォルトで十分ですが、ここでは、Vueに新しい言語（一種）を追加する方法と、他の言語を構成する方法を示します。

構成

これは、基本的なWebpack構成がすでに準備されていることを前提としています。（そうでない場合は、vue-cliの webpack-simple テンプレートを使用してください。）

基本的なビルドの準備ができたら、 webpack.config.js などを開き、vue-loaderオプションを探します。

webpack.config.js

...
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
  }
},
...

これで、テンプレート内の特定のブロックについて、Vueはその言語に一致するローダーを見つけようとします。すなわち。 SASSはsass-loaderおよびLESS-> less-loaderになります。それはすべてうまくいっていますが、多くの場合、SCSSを使用したいと考えています。そして、scss-loaderのようなものはありません。

ありがたいことに、 vue-loader を使用すると、任意の言語で使用されるローダーをオーバーライドでき、new言語を追加することもできます。

以下を使用して、SCSSのサポートを追加できます。

...
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: {
        loader: 'sass-loader'
      }
    }
  }
},
...

そしてそれを使用してください：

<template>
  ...
</template>

<style lang="scss">
  .i {
    &.can {
      &.use {
        &.scss {
          color: red;
        }
      }
    }
  }
</style>

同じローダーの2つの別々の構成が必要な場合は、それも実行できます。 scss-loaderの単なる別の構成である「新しい言語」を作成しましょう。

...
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: {
        loader: 'sass-loader'
      },

      newscss: {
        loader: 'sass-loader',
        options: {
          includePaths: ['../../../somewhere/far/far/away']
        }
      }
    }
  }
},
...

そしてそれを使用してください：

<template>
  ...
</template>

<style lang="newscss">
  @import 'starwars-styles';

  .i {
    &.can {
      &.use {
        &.scss {
          color: $font-color;
        }
      }
    }
  }
</style>

このパターンは、他のほとんどすべてのWebpackローダーで使用できます。唯一の要件は、スクリプトのローダーが有効な JavaScript を出力し、スタイルのローダーが有効な CSS を出力し、HTMLのローダーが有効なHTMLパーシャルを出力し、vueスタイルの属性を正しく処理することです。その結果、Vueでほとんどすべてのプリプロセッサを使用するのは簡単です。楽しみ！

getdocs

13036