如何在Svelte组件及Sapper项目中使用PugJS？

当然可以！你完全能在Svelte（包括Sapper）组件里用PugJS作为模板语言，核心是借助svelte-preprocess来处理Pug的编译——不用纠结svelte-loader，它会在Webpack场景下和预处理器配合工作。下面是具体的实现步骤：

1. 安装必要依赖 #

首先得装上Pug本身，以及支持Pug的Svelte预处理器：

npm install --save-dev pug svelte-preprocess

2. 配置Sapper的构建工具 #

Sapper默认用Rollup，也支持Webpack，下面分别给出两种配置方式：

针对Rollup（默认） #

打开项目根目录的rollup.config.js，先导入svelte-preprocess：

import sveltePreprocess from 'svelte-preprocess';

然后找到svelte插件的配置部分，在options里添加preprocess选项：

svelte({
  preprocess: sveltePreprocess({
    pug: {
      // 可添加Pug自定义配置，比如开发环境开启格式化输出
      pretty: process.env.NODE_ENV === 'development'
    }
  }),
  // 保留原有其他配置...
})

针对Webpack #

如果你的Sapper项目用Webpack构建，打开webpack.config.js，先导入svelte-preprocess，再在svelte-loader的options里配置：

const sveltePreprocess = require('svelte-preprocess');

// ...
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
            preprocess: sveltePreprocess({
              pug: {
                pretty: process.env.NODE_ENV === 'development'
              }
            }),
            // 保留原有其他配置...
          }
        }
      }
    ]
  }
}

3. 在Svelte组件中编写Pug代码 #

现在你就能在.svelte文件里用Pug写模板了，建议显式声明lang="pug"（虽然预处理器能自动识别，但这样更清晰）。示例组件：

<script>
  let username = 'Pug Lover';
  let showGreeting = true;
</script>

<style>
  .greeting {
    color: #2c3e50;
    font-size: 1.2rem;
  }
</style>

<template lang="pug">
  div.container
    h1 Hello, {username}!
    if showGreeting
      p.greeting Welcome to using Pug in Svelte/Sapper!
    button(on:click={() => showGreeting = !showGreeting}) Toggle Greeting
</template>

这里Pug语法能和Svelte特性完美结合：

• 直接用Svelte的变量插值{username}
• 用Pug的if替代Svelte的{#if}块指令
• 事件绑定on:click可直接写在Pug属性里
• 组件的script和style部分保持原有Svelte语法不变

一些注意事项 #

• 确保Pug缩进正确（推荐2空格），否则会编译报错
• 若需自定义Pug编译规则（比如修改doctype、添加全局变量），可在svelte-preprocess的pug配置项里传递更多参数
• 开发环境开启pretty: true能让编译后的HTML更易读，生产环境建议关闭以减小文件体积

内容的提问来源于stack exchange，提问作者anoop chandran