Svelte (routify) + 汇总：不关注 /static 中的 css 变化

Question

我希望能够观察 /static 的变化（例如，在 global.css 上）

我正在使用以下代码来监视我的静态目录的变化：

        watch: {
            clearScreen: false,
            include: ["static/**", "src/**"]
        },

我还尝试调用 add "css" 到 routify cli 中的 --extensions 选项： routify -D --extensions svelte,html,md,css

但是没有任何效果，而且我似乎无法触发对 css 文件更改的重建...有什么建议吗？

谢谢！

Answer 1

Rollup 仅监视包含在您的包中的文件（即已 import 直接或间接从您的入口点导入的文件中的文件 - input 在您的 Rollup 配置中） .换句话说，未导入但仅在 index.html 中引用的文件不能依赖 Rollup watcher。我们需要一个带有自己的文件观察器的复制插件，但目前有 none.

如果仅用于 CSS 资产，您可以使用 main.js 中的 rollup-plugin-postcss 和 import './global.css'，而不是直接将其放在 static 目录中.这是一个 article，其中详细说明了如何做到这一点。

...

好吧，自从我开始写这个答案，现在有一个具有监视功能的复制插件：rollup-plugin-copy-watch。

因此，如果您需要的不仅仅是 CSS，或者如果您不想将 global.css 包含到构建过程中，则可以使用它。

在您的项目中安装：

yarn add -D rollup-plugin-copy-watch

在您的 rollup.config.js 中，更改导入：

// import copy from 'rollup-plugin-copy'
import copy from 'rollup-plugin-copy-watch'

并在 copy 插件中添加一个 watch 选项（在示例中还添加了 verbose，以确保其有效）：

      copy({
        targets: [
          { src: staticDir + '/**/!(__index.html)', dest: distDir },
          { src: `${staticDir}/__index.html`, dest: distDir, rename: '__app.html', transform },
        ],
        copyOnce: true,
        flatten: false,

        watch: staticDir,
        verbose: true,
      }),

Svelte (routify) + 汇总：不关注 /static 中的 css 变化

Svelte (routify) + rollup: not watching for css changes in /static

svelte

rollup