React Hydrogen Неизвестное расширение файла «.css» при использовании библиотеки слайдеров

Question

Я пытаюсь использовать библиотеку Splide Slider в своем проекте Hydrogen. Hydrogen использует серверные компоненты.

Итак, я создал слайдер как клиентский компонент, а затем попытался отобразить его в серверном компоненте. Однако я получаю сообщение об ошибке, потому что я импортирую файл css.

[vite] Internal server error: Unknown file extension ".css" for .../node_modules/@splidejs/react-splide/dist/css/splide.min.css

Я попытался обновитьфайл, чтобы добавить поддержку импорта css в серверные компоненты, но я все равно получаю ту же ошибку. Ниже приведено то, что предлагают документы Hydrogen:

      export default defineConfig({
  plugins: [hydrogen({experimental: {css: 'global'}})]
})

Проблемы явно связаны с импортом css, потому что, как только я удаляю его и перезапускаю свою среду разработки, он загружается. Также, если я запускаю env без импорта, а затем добавляю его обратно, после горячей перезагрузки он работает, но после обновления браузера ошибка возникает снова.

Вот компонент, который является просто шаблоном.

      import {Splide, SplideSlide} from '@splidejs/react-splide'
import '@splidejs/react-splide/css'

export function ProductSlider() {
  return (
    <>
      <Splide
        options={{rewind: true}}
        aria-label="React Splide Example"
      >
        <SplideSlide>
          <p>test</p>
        </SplideSlide>
        <SplideSlide>
          <p>test 2</p>
        </SplideSlide>
      </Splide>
    </>
  )
} 

Любые идеи о том, как я могу обойти это?

Answer 1

Мое решение состояло в том, чтобы скопировать мини-файлы css из моделей узлов и поместить их в мой каталог src, а затем импортировать css из src в компонент.

Не мой любимый, но работает.