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

    如何在 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. export default data: ->
    7.   { name: 'World' }
    8. </script>
    10. <style lang="sass">
    11. .red
    12.   color: red
    13. </style>
    15. <style lang="scss">
    16. .red {
    17.   color: red
    18. }
    19. </style>

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

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