VueWebpackローダーをカスタマイズする方法
Vueの最もユニークな機能の1つは、.vue単一ファイルコンポーネントに他の言語とプリプロセッサが組み込まれていることです。 これにより、利用可能なWebpackローダーがあれば、好きなプリプロセッサを使用できます。 多くの場合、デフォルトで十分ですが、ここでは、Vueに新しい言語(一種)を追加する方法と、他の言語を構成する方法を示します。
構成
これは、基本的なWebpack構成がすでに準備されていることを前提としています。 (そうでない場合は、vue-cliの webpack-simple テンプレートを使用してください。)
基本的なビルドの準備ができたら、 webpack.config.js などを開き、vue-loaderオプションを探します。
...
{
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でほとんどすべてのプリプロセッサを使用するのは簡単です。 楽しみ!