# 使用预处理器

在 webpack 中，所有预处理器都需要使用相应的加载器来应用。vue-loader 允许你使用其他 webpack 加载器来处理 Vue 组件的一部分。它会根据语言块的 lang 属性和 webpack 配置中的规则自动推断出要使用的正确加载器。

# Sass

例如，要使用 Sass/SCSS 编译我们的 <style> 标签

npm install -D sass-loader node-sass

在你的 webpack 配置中

module.exports = {
  module: {
    rules: [
      // ... other rules omitted

      // this will apply to both plain `.scss` files
      // AND `<style lang="scss">` blocks in `.vue` files
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // plugin omitted
}

现在除了能够 import 'style.scss' 之外，我们还可以在 Vue 组件中使用 SCSS

<style lang="scss">
/* write SCSS here */
</style>

块中的任何内容都将被 webpack 处理，就像它在 *.scss 文件中一样。

# Sass vs SCSS

请注意，sass-loader 默认情况下处理非缩进式的 scss 语法。为了使用缩进式的 sass 语法，你需要向加载器传递选项

// webpack.config.js -> module.rules
{
  test: /\.sass$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        indentedSyntax: true,
        // sass-loader version >= 8
        sassOptions: {
          indentedSyntax: true
        }
      }
    }
  ]
}

sass-loader 还支持一个 additionalData 选项，它允许你在所有处理过的文件之间共享公共变量，而无需显式导入它们

// webpack.config.js -> module.rules
{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        // you can also read from a file, e.g. `variables.scss`
        // use `prependData` here if sass-loader version = 8, or
        // `data` if sass-loader version < 8
        additionalData: `$color: red;`
      }
    }
  ]
}

# LESS

npm install -D less less-loader

// webpack.config.js -> module.rules
{
  test: /\.less$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'less-loader'
  ]
}

# Stylus

npm install -D stylus stylus-loader

// webpack.config.js -> module.rules
{
  test: /\.styl(us)?$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'stylus-loader'
  ]
}

# PostCSS

提示

Vue Loader v15 不再默认应用 PostCSS 转换。你需要通过 postcss-loader 使用 PostCSS。

npm install -D postcss-loader

// webpack.config.js -> module.rules
{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { importLoaders: 1 }
    },
    'postcss-loader'
  ]
}

PostCSS 的配置可以通过 postcss.config.js 或 postcss-loader 选项完成。有关详细信息，请参阅 postcss-loader 文档.

postcss-loader 也可以与上面提到的其他预处理器结合使用。

# Babel

npm install -D babel-core babel-loader

// webpack.config.js -> module.rules
{
  test: /\.js?$/,
  loader: 'babel-loader'
}

Babel 的配置可以通过 .babelrc 或 babel-loader 选项完成。

# 排除 node_modules

对于应用于 .js 文件的 JS 转译规则（例如 babel-loader），通常会有 exclude: /node_modules/。由于 v15 的推断更改，如果你在 node_modules 中导入 Vue SFC，它的 <script> 部分也会被排除在转译之外。

为了确保 JS 转译应用于 node_modules 中的 Vue SFC，你需要使用排除函数而不是白名单来将它们列入白名单

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: file => (
    /node_modules/.test(file) &&
    !/\.vue\.js/.test(file)
  )
}

# TypeScript

npm install -D typescript ts-loader

// webpack.config.js
module.exports = {
  resolve: {
    // Add `.ts` as a resolvable extension.
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      // ... other rules omitted
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: { appendTsSuffixTo: [/\.vue$/] }
      }
    ]
  },
  // ... plugin omitted
}

TypeScript 的配置可以通过 tsconfig.json 完成。还可以参阅 ts-loader 的文档。

# Pug

处理模板有点不同，因为大多数 webpack 模板加载器（如 pug-loader）返回模板函数而不是编译后的 HTML 字符串。我们不需要使用 pug-loader，而是需要使用返回原始 HTML 字符串的加载器，例如 pug-plain-loader

npm install -D pug pug-plain-loader

// webpack.config.js -> module.rules
{
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}

然后你可以写

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

如果你还打算用它在 JavaScript 中将 .pug 文件作为 HTML 字符串导入，你需要在预处理加载器之后链接 raw-loader。但是请注意，添加 raw-loader 会破坏 Vue 组件中的使用，因此你需要有两个规则，一个使用 resourceQuery 针对 Vue 文件，另一个（回退）针对 JavaScript 导入

// webpack.config.js -> module.rules
{
  test: /\.pug$/,
  oneOf: [
    // this applies to `<template lang="pug">` in Vue components
    {
      resourceQuery: /^\?vue/,
      use: ['pug-plain-loader']
    },
    // this applies to pug imports inside JavaScript
    {
      use: ['raw-loader', 'pug-plain-loader']
    }
  ]
}