correct way to import css files from packages

[ngdot]

Hi,

first – thanks for your page-kit! It's awesome.

I'm struggling with the right way to import of css files from installed node_modules packages, but I'm unsure whats the problem.

Currently I can only import package css files from, for example https://swiperjs.com/, if I import them directly in the index.css files from a page. But the way it normally works, is to import them in the .js file – isn't it? On dev mode, it works fine, but If I built it, it doesn't work.

Does not work, but should?: In this case, only my content from "index.css" is loaded, but not the styles from swiper. If I remove the lineimport './index.css'; it works again. It seems, that my file "index.css" do not merge with the other styles, which i want to import. Is there another way?

// index.js
import './index.css';
import Swiper from 'swiper';
import { Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';

Works:

// index.css
@import 'swiper/css';
@import 'swiper/css/navigation';

// index.js
import './index.css';
import Swiper from 'swiper';
import { Navigation } from 'swiper/modules';

[arnoson]

Importing css files from your index.js should work, could you create a minimal repo that demonstrates the issue?

[ngdot]

Okay, I tested a bit arround.

As I said, in dev mode, npm run dev everything works fine. But If you do npm run preview or npm run build its getting weird. It seems that the css imports are not getting recognized / bundled with the the main css file of the page – if you do the same imports on another page!

Checkout my example with the pages "home" and "about". https://github.com/ngdot/kirby-vite-multi-page-kit

If you remove the swiper imports form src/templates/about/index.js it works. Maybe a naming problem? What can I try to give you more information?

[arnoson]

Thanks for the repo!

Yes the imports don't get bundled into the template file if you use it in multiple templates, because than your users would have to load the code multiple times if they navigate your website. Vite automatically creates a new chunk with the shared code between your templates, this is intended behaviour. But non the less it should work in build... I'm no expert on the Vite internals and a multi-page app with Vite is quite a niche usecase, so I don't know what goes wrong in bundling. But this doesn't seem to be an issue with the kirby-vite plugin, but with Vite itself. You could create a super minimalistic repo without kirby, just a few html files and Vite with the multi page app setup to make sure the problem is caused by Vite itself and if so, create an issue on the Vite repository.

For now I would either add all the swiper related imports to your shared index.js or using your solution with the the css imports inside the css file.

[arnoson]

Ah nevermind, I think it is in issue witrh my plugin... The swiper css you import from two templates is put into new chunks named pagination-[hash].js and pagination-[hash].css that are shared between the templates. The pagination-[hash].js file is loaded correctly, but its pagination-[hash].css is not. This is because my plugin only loads the css files associated with the entry (the template's index.js) and doesn't check if shared js chunks have a css with them. I never had sucha scenario, thanks for the good catch! I'll have a look into it, until then use one of the workarounds

[arnoson]

Should be fixed in v5.2.0 :)