3

I'm trying to use DataTables jQuery plugin from svelte, and I'd like to avoid including them in my index.html. I want to reference it form npm.

I tried with this:

<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>

and these are the runtime deps in my package.json

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

jQuery works fine, DataTable works fine too, but I don't know how to tell rollup to include DataTable css files (which are in node_modules/datatables.net-dt/css)

opensas
  • 60,462
  • 79
  • 252
  • 386
  • Does this answer your question? [Import css in node\_modules to svelte](https://stackoverflow.com/questions/56483209/import-css-in-node-modules-to-svelte) – zmag Jan 17 '20 at 03:26

1 Answers1

3

You can directly import the css file and use rollup-plugin-postcss:

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

  // ...
</script>
Tan Li Hau
  • 1,984
  • 17
  • 24
  • Using import 'datatables.net-dt/css/jquery.dataTables.min.css' it works fine. I can see applied the style but not the images referenced by the style. Is there some rollup plugin which also supports referenced files (fonts, icons, images) ? – AutoCiudad Jan 22 '20 at 12:34