Closed CColon1 closed 2 years ago
Hi @CColon1!
Can you please share you Rollup configuration?
My guess is that you probably haven't disabled style injection in rollup-plugin-postcss
's options:
plugins: [
postcss({
inject: false,
}),
...
],
I'm having the same issue, in my case, it's because I'm using Vite. Looks like Vite is injecting the styles in index.html
Hey @jlesquembre! That's Vite's default behaviour which, unfortunately, as of now cannot be disabled. See https://github.com/vitejs/vite/issues/3246 and https://github.com/vitejs/vite/pull/2148#issuecomment-784738508
@umbopepato thanks for the links, let's see if it gets fixed in Vite
FYI, pretty sure this was fixed in Vite. You just need to add ?inline
after the scss imports.
e.g.
import styles from './my-styles.scss?inline';
See: https://github.com/vitejs/vite/commit/e1de8a888ea9adb9dc415cf74aec43dfa83aa526
Thanks for the heads up @vmadman, I updated the README! 🙂
I'm not sure if this is an issue WIth this plugin, PostCSS, rollup, or If I just don't know what I'm doing. However I'm injecting a web component in to a wordpress site. The bundled component uses it's own css, however that css is effecting the rest of the site. My understanding was that the components css should be sandboxed in the shadow dom. Any tips would be greatly appreciated.