如何在 Nuxt.js 中使用预处理器？

得益于 vue-loader, 我们可以通过 lang 属性在组件中的<template>， <script> 或 <style> 上使用各种预处理器。

举个例子，我们在 pages/index.vue 组件中使用 Pug， CoffeeScript 和 Sass：

  1. <template lang="pug">
  2.   h1.red Hello {{ name }}!
  3. </template>
  5. <script lang="coffee">
  6. module.exports = data: ->
  7.   { name: 'World' }
  8. </script>
  10. <style lang="sass">
  11. .red
  12.   color: red
  13. </style>

记得安装这些预处理器对应的 npm 依赖包和 Webpack 加载器:

  1. npm install --save-dev pug@2.0.0-beta6 pug-loader coffeescript coffee-loader node-sass sass-loader

同时在配置webpack的扩展
const vueLoader = webpackConfig.module.rules.find((rule) => rule.loader === ‘vue-loader’)
vueLoader.options.loaders.sass = ‘vue-style-loader!css-loader!sass-loader’