css Question posted in
Some basic documentation can be found here.

Css – How correct import styles

I using vanilla javascript + Vite, why styles doesn’t work?

this point I import style of logo component and this is common style.css

@import url("./CORE/Logo/style.scss");

*,
body,
html {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}

and this is section logo component and how this I import my style from common style.css and implemented

import "../../style.css"

export default () =>
    `
    <main>
        <section>
            <figcaption class="logo">
                <img src="/images/logo.png" alt="logo" />
            </figcaption>
        </section>
        <section>
            <p class="name">Test</p>
        </section>
   </main>`;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    const shadowRoot = document.getElementById('your-shadow-root-id').attachShadow({mode: 'open'});
const styleSheet = new CSSStyleSheet();
await styleSheet.replace('your css content here');
shadowRoot.adoptedStyleSheets = [styleSheet];

    CSSStyleSheet


  2. 0

    You can import CSS using import assertions, see https://web.dev/articles/css-module-scripts.

    import sheet from "../../style.css" with {type: "css"};
document.adoptedStyleSheets = [sheet];
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search