使用预处理器

    例如，为了通过 Sass/SCSS 编译我们的 <style> 标签：

    在你的 webpack 配置中：

    1. module.exports = {
    2.   module: {
    3.     rules: [
    4.       // ... 忽略其它规则
    6.       // 普通的 `.scss` 文件和 `*.vue` 文件中的
    7.       // `<style lang="scss">` 块都应用它
    8.       {
    9.         test: /\.scss$/,
    10.         use: [
    11.           'vue-style-loader',
    12.           'css-loader',
    13.           'sass-loader'
    14.         ]
    15.       }
    16.     ]
    17.   },
    18.   // 插件忽略
    19. }

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

    1. <style lang="scss">
    2. /* 在这里撰写 SCSS */
    3. </style>

    这个块里的任何内容都会被 webpack 当作在一个 *.scss 文件中一样被处理。

    注意 sass-loader 会默认处理不基于缩进的 scss 语法。为了使用基于缩进的 sass 语法，你需要向这个 loader 传递选项：

    1. // webpack.config.js -> module.rules
    2. {
    3.   test: /\.sass$/,
    4.   use: [
    5.     'vue-style-loader',
    6.     'css-loader',
    7.     {
    8.       loader: 'sass-loader',
    9.       options: {
    10.         indentedSyntax: true
    11.       }
    12.     }
    13. }
    1. // webpack.config.js -> module.rules
    2. {
    3.   test: /\.scss$/,
    4.   use: [
    5.     'vue-style-loader',
    6.     'css-loader',
    8.       loader: 'sass-loader',
    9.       options: {
    10.         // 你也可以从一个文件读取，例如 `variables.scss`
    11.         data: `$color: red;`
    12.       }
    13.     }
    14.   ]
    15. }

    Less

    1. npm install -D less less-loader
    1. npm install -D stylus stylus-loader
    1. // webpack.config.js -> module.rules
    2. {
    3.   test: /\.styl(us)?$/,
    4.   use: [
    5.     'vue-style-loader',
    6.     'css-loader',
    7.     'stylus-loader'
    8.   ]
    9. }

    PostCSS

    TIP

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

    1. npm install -D postcss-loader
    1. // webpack.config.js -> module.rules
    2. {
    3.   test: /\.css$/,
    4.   use: [
    5.     'vue-style-loader',
    6.     {
    7.       loader: 'css-loader',
    8.       options: { importLoaders: 1 }
    9.     },
    10.     'postcss-loader'
    11.   ]
    12. }

    PostCSS 的配置可以通过 postcss.config.js 或 postcss-loader 选项来完成。其更多细节请查阅 postcss-loader 文档。

    postcss-loader 也可以和上述其它预处理器结合使用。

    1. npm install -D babel-core babel-loader

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

    为了确保 JS 的转译应用到 node_modules 的 Vue 单文件组件，你需要通过使用一个排除函数将它们加入白名单：

    1. {
    2.   test: /\.js$/,
    3.   loader: 'babel-loader',
    4.     /node_modules/.test(file) &&
    6.   )
    7. }

    TypeScript

    1. npm install -D typescript ts-loader
    1. // webpack.config.js
    2. module.exports = {
    3.   resolve: {
    4.     // 将 `.ts` 添加为一个可解析的扩展名。
    5.     extensions: ['.ts', '.js']
    6.   },
    7.   module: {
    8.     rules: [
    9.       // ... 忽略其它规则
    10.       {
    11.         test: /\.ts$/,
    12.         loader: 'ts-loader',
    13.         options: { appendTsSuffixTo: [/\.vue$/] }
    14.       }
    15.     ]
    16.   },
    17.   // ...plugin omitted
    18. }

    TypeScript 的配置可以通过 tsconfig.json 来完成。你也可以查阅 ts-loader 的文档。

    模板的处理会稍微有些不同，因为绝大对数 webpack 的模板类 loader，诸如 pug-loader，会返回一个模板函数而不是一个编译好的 HTML 字符串。所以我们需要使用一个返回原始的 HTML 字符串的 loader，例如 pug-plain-loader，而不是使用 pug-loader。

    1. npm install -D pug pug-plain-loader
    1. // webpack.config.js -> module.rules
    2. {
    3.   test: /\.pug$/,
    4.   loader: 'pug-plain-loader'
    5. }

    然后你可以写：

    如果你还打算使用它在 JavaScript 中将 .pug 文件作为字符串导入，你需要在这个预处理 loader 之后链上 raw-loader。注意添加 raw-loader 会破坏 Vue 组件内的用法，所以你需要定义两条规则，其中一条指向使用了一个 resourceQuery 的 Vue 文件，另一条指向 (回退到) JavaScript 导入：

    1. // webpack.config.js -> module.rules
    2. {
    3.   test: /\.pug$/,
    4.   oneOf: [
    5.     // 这条规则应用到 Vue 组件内的 `<template lang="pug">`
    6.     {
    7.       resourceQuery: /^\?vue/,
    8.       use: ['pug-plain-loader']
    9.     },
    10.     // 这条规则应用到 JavaScript 内的 pug 导入
    11.     {
    12.       use: ['raw-loader', 'pug-plain-loader']
    13.     }
    14.   ]
    15. }