CSS error with ShadowDom

1

I created a new project with both Vite and Webpack with the latest version beta 22.

Vite crashes with the following code:

import shared from ‘./_shared/shared.css’;

Aurelia
.register(StyleConfiguration.shadowDOM({
sharedStyles: [shared]
}))
Uncaught SyntaxError: The requested module ‘/src/_shared/shared.css’ does not provide an export named ‘default’

With the above code, Webpack does not crash. In the shared.css file, there are styles for classes and tags. But only the style for tags works, the classes do not.

2

I tried with the project created via npx and webpack.
The welcome-page has code:

<h1 class="title">${message}</h1>

And create a welcome-page.css with code:
h1{
color: orange;
}
.title{
background-color: #F4F4F4;
color: red !important;
}
The app displays incorrectly h1 is still orange instead of background color #F4F4F4 and text is red

3

I think I had the same problem, could you try making the following changes to the webpack.config.js file:

image
image602×490 13.4 KB

1 Like
4

Now I temporarily use Vite and import css directly into each html file.