Webpack Encore not referencing basic styles

[justin-oh]

Current Behavior:

I'm using Symfony's Webpack Encore. These imports are "working" (not throwing any errors in the build process) but the styles are not being referenced on the frontend:

import 'vidstack/player/styles/default/theme.css';
import 'vidstack/player/styles/default/layouts/video.css';

I can cause the imports to throw an error by changing the path. This was done as a sanity check.

I'm having to include CDN links to get things working:

<link rel="stylesheet" href="https://cdn.vidstack.io/player/theme.css" />
<link rel="stylesheet" href="https://cdn.vidstack.io/player/video.css" />

Expected Behavior:

I expect the CSS to get imported and referenced like my other package integrations. I am following the same patterns for each.

Swiper JS (npm install swiper)

// frontend/js/swiper.js
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';

window.Swiper = Swiper;

Fancybox (npm install @fancyapps/ui)

// frontend/js/fancybox.js
import { Fancybox } from '@fancyapps/ui';
import '@fancyapps/ui/dist/fancybox/fancybox.css';

Fancybox.bind('[data-fancybox]');

window.Fancybox = Fancybox;

Steps To Reproduce:

This is my integration for vidstack:

// frontend/js/vidstack.js
import 'vidstack/player/styles/default/theme.css';
import 'vidstack/player/styles/default/layouts/video.css';

import { VidstackPlayer, VidstackPlayerLayout } from 'vidstack/global/player';

window.VidstackPlayer = VidstackPlayer;
window.VidstackPlayerLayout = VidstackPlayerLayout;

The JS is imported fine. I can init a VidstackPlayer within that JS file or within a template using the global variables created by this file.

No repro link yet. It would take a bit to spin up a whole Symfony environment.

Environment:

Vanilla HTML and JS using Symfony's Webpack Encore to build with NPM 10.8.2 and Node v18.20.8.

Anything Else?

I thought maybe this package.json exports syntax doesn't jive with Webpack Encore:

"./player/styles/*": "./player/styles/*",

This is the relevant exports line for Swiper:

"./css/bundle": "./swiper-bundle.css",

Fancybox's package.json has no exports.

I tried playing around with the exports in your package.json. I also ended up trying the complete removal of exports and the styles still do not get referenced on the frontend. (After editing, I always did a new npm install to make sure the changes are in effect.)

[justin-oh]

I would like to add that I tried the following 2 options, and settled on the latter:

1. Altering Webpack config to copy CSS files

.copyFiles({
  from: './node_modules/vidstack/player/styles',
  to: 'css/vidstack/[path][name].[ext]',
  pattern: /\.css$/,
})

2. Importing CSS files from my Sass

@import '~vidstack/player/styles/default/theme';
@import '~vidstack/player/styles/default/layouts/video';

This second solution works fine for me and it is virtually the same as your documentation.