使用预处理器

在 webpack 中,所有的预处理器需要匹配对应的 loader。vue-loader 允许你使用其它 webpack loader 处理 Vue 组件的某一部分。它会根据 lang 属性自动推断出要使用的 loader。

CSS

例如,使用 Sass 编译我们的 <style> 语言块:

npm install sass-loader node-sass --save-dev
<style lang="sass">
  /* write sass here */
</style>

在内部,<style> 标签中的内容将会先由 sass-loader 进行处理,然后再传递进行下一步处理。

sass-loader 警告

与名称相反,sass-loader 默认解析 SCSS 语法。如果你想要使用 Sass 语法,你需要配置 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

然后增加下面的 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,建议只包含变量、mixins 等。

JavaScript

Vue 组件中的所有 JavaScript 默认使用 babel-loader 处理。你也可以改变处理方式:

npm install coffee-loader --save-dev
<script lang="coffee">
  # Write coffeescript!
</script>

模版

模版的处理方式略有不同,因为大多数 webpack 模版处理器 (比如 pug-loader) 会返回模版处理函数,而不是编译的 HTML 字符串,我们使用原始的 pug 替代 pug-loader

npm install pug --save-dev
<template lang="pug">
div
  h1 Hello world!
</template>

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

行内 Loader Requests

你可以在 lang 属性中使用 webpack loader requests

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

但是,这使你的 Vue 组件只适用于 webpack,不能与 Browserify 和 vueify 一同使用。如果你打算将你的 Vue 组件作为可重复使用的第三方组件,请避免使用这个语法。

results matching ""

    No results matching ""