Rollup无法编译Svelte项目的HTML与CSS文件问题求助

问题根因 #

• Rollup默认不负责生成HTML文件，官方Svelte项目模板的public/index.html是预设的静态文件，并非打包生成
• 你当前的rollup-plugin-svelte配置没有开启单独导出CSS，CSS默认被内嵌到bundle.js中，不会生成独立CSS文件
• 你修改导入语法为require的操作对解决该问题无效，建议改回ESModule的import写法适配TypeScript生态

修复步骤 #

1. 生成独立CSS文件 #

首先安装CSS抽离插件：
npm install --save-dev rollup-plugin-css-only

修改rollup.config.js配置：

// 头部引入插件
import css from 'rollup-plugin-css-only'

export default {
  // 其余原有配置保持不变
  plugins: [
    svelte({
      include: "src/**/*.svelte",
      preprocess: sveltePreprocess({ sourceMap: !production }),
      compilerOptions: {
        dev: !production,
        // 新增：开启CSS导出给外部插件处理
        css: 'external'
      }
    }),
    // 新增：抽离CSS为独立文件，输出到public/build/bundle.css
    css({ output: 'bundle.css' }),
    // 其余原有插件（比如resolve、commonjs、typescript等）保持不变
  ]
}

2. 处理HTML文件 #

两种方案二选一即可：

方案A：手动创建静态HTML（推荐，和官方模板逻辑一致）

直接在public文件夹下新建index.html，内容参考：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Svelte应用</title>
  <link rel="stylesheet" href="/build/bundle.css">
</head>
<body>
  <script src="/build/bundle.js"></script>
</body>
</html>

方案B：配置Rollup自动生成HTML

安装HTML生成插件：
npm install --save-dev @rollup/plugin-html

修改rollup.config.js配置：

// 头部引入插件
import html from '@rollup/plugin-html'

export default {
  // 其余原有配置保持不变
  plugins: [
    // ... 前面的svelte、css等插件配置不变
    // 新增：自动生成HTML文件
    html({
      fileName: '../index.html', // 输出到public根目录（对应build文件夹的上级）
      title: '你的Svelte应用'
    })
  ]
}

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