使用预处理器

在Webpack中，所有预处理器都需要应用相应的加载器。 vue-loader允许你使用其他Webpack加载器处理Vue组件的一部分。它将从语言块的lang属性自动推断出要使用的正确加载器。

CSS

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

  1. npm install sass-loader node-sass --save-dev
  1. <style lang="sass">
  2.   /* 在这里写sass代码 */
  3. </style>

在引擎盖下，<style>标签内的文本内容将首先由sass-loader编译，然后传递进行进一步处理。

sass-loader 警告

与其名称指示相反，sass-loader](https://github.com/jtangelder/sass-loader)默认解析 SCSS语法。如果实际上想要使用缩进的 SASS语法，则必须相应地为sass-loader配置vue-loader的选项。

  1. {
  2.   test: /\.vue$/,
  3.   loader: 'vue-loader',
  4.   options: {
  5.     loaders: {
  6.       scss: 'vue-style-loader!css-loader!sass-loader' // <style lang="scss">
  7.       sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
  8.     }
  9.   }
  10. }

有关如何配置vue-loader的详细信息，请参阅高级加载程序配置部分。

JavaScript

默认情况下，Vue组件中的所有JavaScript都由babel-loader处理。 但你当然可以改变它：

  1. npm install coffee-loader --save-dev
  1. <script lang="coffee">
  2.   # 编写coffeescript!
  3. </script>

Templates

Processing templates is a little different, because most Webpack template loaders such as pug-loader return a template function instead of a compiled HTML string. Instead of using pug-loader, we can just install the original pug:

处理模板有点不同，因为大多数Webpack模板加载器（如pug-loader）返回一个模板函数，而不是一个编译的HTML字符串。我们可以安装原生的的pug来替代pug-loader：

  1. npm install pug --save-dev
  1. <template lang="pug">
  2. div
  3.   h1 Hello world!
  4. </template>

重要: 如果你使用 vue-loader@<8.2.0，你还需要安装template-html-loader.

内联加载请求

你可以在lang属性上使用 Webpack loader 请求:

  1. <style lang="sass?outputStyle=expanded">
  2.   /* 在使用sass扩展输出 */
  3. </style>

但是，请注意，这使你的Vue组件Webpack特定，并不兼容Browserify和vueify。 如果您打算将您的Vue组件作为可重复使用的第三方组件，请避免使用此语法。