Svelte JS - 是否可以更改 global.css 构建路径？

Question

我正在为具有非常特定文件夹结构要求的平台开发。因此，global.css 文件需要位于文件夹（无论是构建文件夹还是它自己的文件夹）中，而不是根文件夹中。有没有办法编辑 rollup.config.js 以便 global.css 文件在我 运行 “npm 运行 build”时重新定位到我选择的目录？

Answer 1

我假设您正在使用 Svelte Rollup template。

如果是这样，global.css 直接在 index.html 中引用。

index.html

    <link rel='stylesheet' href='/global.css'>

Rollup 不查看也不处理此文件。

这意味着您可以将它移动到 public 目录中您想要的任何位置，只要您保持上述行中的 URL 同步即可。

我建议不要将它放在 public/build 目录中的某个位置，因为该目录中的所有其他文件都是生成的文件，这可能会导致混乱或不必要的并发症。

例如，您可以将文件移动到 public/my-dir/global.css，并相应地更新 link index.html：

index.html

    <link rel='stylesheet' href='/my-dir/global.css'>

---

另一种选择是将 global.css 文件移动到 src 目录中，并将其导入到您的项目中，例如 main.js:

main.js

import './global.css' // we're importing src/global.css

这样，global.css 将由 Rollup 处理（感谢配置中的 CSS plugin），其内容将最终出现在构建的 bundle.css 文件中。