プリプロセッサの使用

webpack において、全てのプリプロセッサは対応する loader を適用する必要があります。 vue-loader は他の webpack の loader を使って Vue コンポーネントを処理することが出来ます。言語ブロックの lang 属性から適切な loader を自動的に推論します。

CSS

例えば、Sass で <style> タグをコンパイルしましょう:

npm install sass-loader node-sass --save-dev

<style lang="sass">
  /* ここにSassを書きます */
</style>

<style> タグ内のテキストコンテンツは、sass-loader によって最初にコンパイルされ、その後の処理のために渡されます。

sass-loader 使用時の注意

その名前が示すものとは対照的に、 sass -loader はデフォルトで SCSS の構文を解析します。インデントされた Sass 構文を実際に使用する場合は、それに応じて sass-loader へ vue-loader のオプションを設定する必要があります。

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
    }
  }
}

vue-loader を構成する方法の詳細については、高度な loader の設定セクションを参照してください。

グローバル設定ファイルの読み込み

一般的な要求は、毎回明示的にインポートする必要なく、各コンポーネントに設定ファイルを読み込み可能であることです。例としてすべてのコンポーネントで scss 変数をグローバルに使用することです。これを成し遂げるためには:

npm install sass-resources-loader --save-dev

のように sass-resources-loader をインストールし、以下の webpack のルールを追加します:

{
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/style/_variables.scss')
  }
}

例として、vuejs-templates/webpack を使用している場合、 build/utils.js を以下のように変更してください:

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/style/_variables.scss')
    }
  }
),

最終的にコンパイルされたファイルに CSS が重複しないように、変数、ミックスインなどのみをこのファイルに含めることをお勧めします。

JavaScript

全ての Vue コンポーネントの JavaScript はデフォルトで babel-loader によって処理されます。しかしもちろんそれは変更することが可能です:

npm install coffee-loader --save-dev

<script lang="coffee">
  # coffeescript を書いてください!
</script>

テンプレート

pug-loader のようなほとんどのwebpackテンプレート loader は、コンパイルされたHTML文字列の代わりにテンプレート関数を返すので、template の処理は少し異なります。pug-loader を使う代わりに、オリジナルの pug をインストールをするだけです:

npm install pug --save-dev

<template lang="pug">
div
  h1 Hello world!
</template>

重要: もし vue-loader@<8.2.0 を使うのであれば、template-html-loader が必要になります。

インラインローダーリクエスト

lang 属性で webpack loader requests を使用することが可能です:

<style lang="sass?outputStyle=expanded">
  /* ここでは拡張出力で sass を使用します */
</style>

ただこれにより Vue コンポーネントが webpack 固有となり Browserify および vueify と互換性がなくなります。 Vue コンポーネントを再利用可能なサードパーティコンポーネントとして提供する場合は、この構文を使用しないでください。