Svelte (routify) + rollup:不关注/static中的css变化

Question

我希望能够监视/static中的更改(例如，在global.css上)

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

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

我还尝试在routify cli：routify -D --extensions svelte,html,md,css中调用add "css“to the --extensions选项

然而，什么都不起作用，我似乎不能触发对css文件的更改的重建……有什么建议吗？

谢谢!

Answer 1

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

如果仅用于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'

并将watch选项添加到copy插件中(还在示例中添加了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,
      }),