unable to use css moduel in vite4 for react

by

i am using vite4 for react and am unable to figure out how i can use the css modules

import { NavLink } from "react-router-dom";
import styles from "./Navigation.moduel.css?inline";
function Navigation() {
  console.log(styles);
  console.log(styles.navbar);
  return (
    <header className={styles.navbar}>
      <nav>
        <ul>
          <li>
            <NavLink to={"/"}>Home</NavLink>
          </li>
          <li>
            <NavLink to={"/product"}>Product</NavLink>
          </li>
          <li>
            <NavLink to={"/pricing"}>Pricing</NavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
}

export default Navigation;

.navbar {
  background-color: orange;
}
.navbar ul {
  display: flex;
}

i am getting the styles object the console but getting undefined styles.navbar

i am using vite4 for react and am unable to figure out how i can use the css modules

I had the same problem as you.
I solve with add in vit.config.js

this code

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css:{
    modules:{
      localsConvention:"camelCase",
      generateScopedName:"[local]_[hash:base64:2]"
    }

  }

})

Leave a Comment