如何使用 npm 从 svelte 使用 jquery 和数据表

Question

我正在尝试使用来自 svelte 的 DataTables jQuery 插件，并且我想避免将它们包含在我的 index.html 中。我想从 npm 引用它。

我试过这个：

<script>
  import { onMount } from 'svelte'
  import jQuery from 'jquery'

  import dt from 'datatables.net'
  import dtCss from 'datatables.net-dt'
  dt(jQuery)

  export let values = []
  let tableElement

  onMount( () => jQuery(tableElement).DataTable() )

</script>

<table bind:this={tableElement} border="1px">
  <thead>
    <tr>
      <th>values</th>
    </tr>
  </thead>
  <tbody>
    {#each values as value}
      <tr>
        <td>{value}</td>
      </tr>
    {/each}
  </tbody>
</table>

这些是我的 package.json 中的运行时依赖

  "dependencies": {
    "datatables.net": "^1.10.20",
    "datatables.net-dt": "^1.10.20",
    "jquery": "^3.4.1",
    "sirv-cli": "^0.4.4"
  }

jQuery 工作正常，DataTable 工作正常，但我不知道如何告诉 rollup 包含 DataTable css 文件（在 node_modules/datatables.net-dt/css 中）

Answer 1

可以直接导入css文件，使用rollup-plugin-postcss：

<script>
  import { onMount } from 'svelte'
  import jQuery from 'jquery'
  import 'datatables.net-dt/css'

  // ...
</script>