如何在现有项目中使用Svelte？rollup打包路径报错及资源404问题求解

问题原因及解决方案 #

1. 打包报错问题 #

你遇到的CSS输出错误是因为rollup-plugin-css-only插件内部调用Rollup的emitFile接口时，不允许fileName参数传入绝对路径或带../的相对路径，仅支持相对于输出根目录的子路径。
修改配置如下即可解决：

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        // 替换原来的file配置，指定输出根目录
        dir: '/path/to/myapp/static',
        // 指定JS文件在输出根目录下的相对路径
        entryFileNames: 'js/svelte-bundle.js'
    },
    plugins: [
        svelte({
            compilerOptions: {
                dev: !production
            }
        }),
        css({
            // 直接指定CSS文件在输出根目录下的相对路径
            output: 'css/svelte-bundle.css'
        }),
        // 其余原有插件保持不变
    ]
}

如果上述调整仍有路径问题，也可以改用自定义输出函数手动写CSS文件到目标位置：

import fs from 'fs'

// plugins数组内的css配置改为
css({
  output: function (css) {
    fs.writeFileSync('/path/to/myapp/static/css/svelte-bundle.css', css)
  }
})

另外需要提前确保/path/to/myapp/static/js和/path/to/myapp/static/css目录存在，不存在的话手动创建即可，避免Rollup因找不到输出目录报错。

2. 浏览器404问题 #

这个报错是因为前面的CSS配置错误导致整个打包流程中断，根本没有生成对应的svelte-bundle.js和svelte-bundle.css文件。解决完打包报错、资源文件正常生成后，404问题会自动消失。
如果打包正常后仍有404，需要确认你本地启动的Web服务的根目录是否是/path/to/myapp，只有根目录匹配时，你HTML中写的/static/css/svelte-bundle.css这类绝对路径才能正确映射到对应资源。

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