VueWebpackローダーをカスタマイズする方法
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でほとんどすべてのプリプロセッサを使用するのは簡単です。 楽しみ!