使用预处理器

在 Webpack 中，所有的预处理器需要和一个相应的加载器一同使用。vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码。它会根据 lang 属性自动用适当的加载器去处理。

例如，我们编译用 SASS 编译 <style> 标签：

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

<style lang="sass">
  /* 这里写一些 sass 代码 */
</style>

在引擎内，首先，<style> 标签内的内容会被 sass-loader 编译，然后再被进一步处理。

默认情况下，Vue 组件内的所有 JavaScript 会被 babel-loader 处理。当然，你也可以更改：

npm install coffee-loader --save-dev

<script lang="coffee">
  # 这里写一些 coffeescript!
</script>

处理模板的过程有点不同，因为大多 Webpack 模板加载器（比如 jade-loader ）会返回一个模板处理函数，而不是被编译过的 HTML 字符串。我们只要安装 jade ，而不是 jade-loader ：

npm install jade --save-dev

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

重要提示: 如果你使用 vue-loader@<8.2.0, 你也需要安装 template-html-loader.

在 lang 属性上，你能使用 Webpack loader requests :

<style lang="sass?outputStyle=expanded">
  /* use sass here with expanded output */
</style>

但是，注意这样只适用特定的 Webpack，并不兼容 Browserify 和 vueify。 如果你想让你的 Vue 组件发布成一个第三方组件的话，避免这样使用

预处理器