SolidJS•9mo ago

CSS Modules not updating without page refresh

I just opened a new solid start app and began adding .module.css files. However, anytime I make an adjustment to the css in a module and save it all styling is wiped from the element on the page (despite vite triggering a reload) and I have to refresh the page in the browser for every change. Any idea what might be causing this? I have also tested a solid start project I created about five months ago and it is not having the same issue so it seems to be something that has changed in the default solid start app in the interm period File structure: components/ ├── DefaultHeader.module.css ├── DefaultHeader.tsx (Default Header)

import styles from "./DefaultHeader.module.css"

export default function DefaultHeader() {
    return (
        <div class={styles.header}>hello</div>
    )
}

import styles from "./DefaultHeader.module.css"

export default function DefaultHeader() {
    return (
        <div class={styles.header}>hello</div>
    )
}

(Default Header css module)

.header {
    width: 100vw;
    height: 10rem;
    background-color: red;
    /* outline: solid black; */
}

.header {
    width: 100vw;
    height: 10rem;
    background-color: red;
    /* outline: solid black; */
}

4 Replies

deluksic•9mo ago

I am experiencing the same. It looks like the css is indeed updated, but the classnames on the elements stay the same, so they don't apply anything.

TheOinkinatorOP•9mo ago

Please let me know if you figure anything out. I am working on it as well

bigmistqke•9mo ago

maybe worth a github issue?

TheOinkinatorOP•8mo ago

I have been digging into this some more and it appears that vite is not triggering an hmr update when the css module is saved and instead is making a page reload. Not sure if that helps anyone I am somewhat of a beginer so trying to pinpoint the root of the issue has been challenging Submitted a git hub issues as I am not making any significant progress haven't seen any action on this what is the usual turnaround on issues?

Gaming

Programming

CSS Modules not updating without page refresh