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>
    )
}

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; */
}

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

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

CSS Modules not updating without page refresh

Similar Threads

Similar Threads

Similar Threads