预处理器

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

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

举个例子,我们在 pages/index.vue 组件中使用 PugCoffeeScriptSass

  1. <template lang="pug">
  2. h1.red Hello {{ name }}!
  3. </template>
  4. <script lang="coffee">
  5. export default data: ->
  6. { name: 'World' }
  7. </script>
  8. <style lang="sass">
  9. .red
  10. color: red
  11. </style>
  12. <style lang="scss">
  13. .red {
  14. color: red;
  15. }
  16. </style>

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

  1. npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader node-sass sass-loader