как использовать jquery и таблицы данных из svelte с помощью npm

Я пытаюсь использовать плагин DataTables jQuery от svelte, и я бы не хотел включать их в свой 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 тоже отлично работает, но я не знаю, как указать накопителю включать файлы css DataTable (которые находятся в node_modules / datatables.net-dt / css)


jquery svelte rollupjs svelte-3 datatables
person opensas    schedule 16.01.2020    source источник
comment
Отвечает ли это на ваш вопрос? Импортируйте css в node_modules, чтобы добиться стройности   -  person zmag    schedule 17.01.2020

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете напрямую импортировать файл css и использовать rollup-plugin-postcss:

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

  // ...
</script>
person Tan Li Hau    schedule 17.01.2020
comment
Используя import 'datatables.net-dt / css / jquery.dataTables.min.css', он отлично работает. Я вижу примененный стиль, но не изображения, на которые он ссылается. Есть ли какой-нибудь накопительный плагин, который также поддерживает файлы, на которые есть ссылки (шрифты, значки, изображения)? - person AutoCiudad; 22.01.2020