diff --git a/.gitignore b/.gitignore
index a21b32a395..403d1cef8a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -55,3 +55,6 @@ playwright-report/
 # plugin-typedoc auto-generated files
 e2e/fixtures/plugin-typedoc/single/doc/api
 e2e/fixtures/plugin-typedoc/multi/doc/api
+
+# ignore typed css module
+*.scss.d.ts
diff --git a/package.json b/package.json
index f6a63acdfe..e7520f5475 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,8 @@
   "name": "rspress-monorepo",
   "private": true,
   "scripts": {
-    "build": "cross-env NX_DAEMON=false NX_REJECT_UNKNOWN_LOCAL_CACHE=0 nx run-many -t build --exclude @rspress-fixture/* --exclude @rspress/docs",
-    "build:website": "cross-env NX_DAEMON=false NX_REJECT_UNKNOWN_LOCAL_CACHE=0 nx run @rspress/docs:build",
+    "build": "cross-env NX_DAEMON=false nx run-many -t build --exclude @rspress-fixture/* --exclude @rspress/docs",
+    "build:website": "cross-env NX_DAEMON=false nx run @rspress/docs:build",
     "change": "changeset",
     "changeset": "changeset",
     "check-dependency-version": "check-dependency-version-consistency . --dep-type devDependencies",
diff --git a/packages/theme-default/package.json b/packages/theme-default/package.json
index 264129f88c..da69b6b1e8 100644
--- a/packages/theme-default/package.json
+++ b/packages/theme-default/package.json
@@ -64,6 +64,7 @@
     "@rsbuild/plugin-react": "~1.1.1",
     "@rsbuild/plugin-sass": "~1.2.2",
     "@rsbuild/plugin-svgr": "^1.0.7",
+    "@rsbuild/plugin-typed-css-modules": "~1.0.2",
     "@rslib/core": "0.5.4",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/hast": "^2.3.10",
diff --git a/packages/theme-default/rslib.config.ts b/packages/theme-default/rslib.config.ts
index 1a7ad02364..4c326fe52b 100644
--- a/packages/theme-default/rslib.config.ts
+++ b/packages/theme-default/rslib.config.ts
@@ -1,6 +1,7 @@
 import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginSass } from '@rsbuild/plugin-sass';
 import { pluginSvgr } from '@rsbuild/plugin-svgr';
+import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';
 import { defineConfig } from '@rslib/core';
 
 const COMMON_EXTERNALS = [
@@ -25,7 +26,12 @@ export default defineConfig({
     {
       format: 'esm',
       dts: { bundle: true },
-      plugins: [pluginReact(), pluginSvgr(), pluginSass()],
+      plugins: [
+        pluginReact(),
+        pluginSvgr(),
+        pluginSass(),
+        pluginTypedCSSModules(),
+      ],
       source: {
         define: {
           __WEBPACK_PUBLIC_PATH__: '__webpack_public_path__',
@@ -49,6 +55,8 @@ export default defineConfig({
         externals: COMMON_EXTERNALS,
         cssModules: {
           localIdentName: '[local]_[hash:hex:5]',
+          namedExport: true,
+          exportLocalsConvention: 'camelCaseOnly',
         },
         copy: {
           patterns: [
diff --git a/packages/theme-default/src/components/Badge/index.tsx b/packages/theme-default/src/components/Badge/index.tsx
index b4abc67af7..1b6f307281 100644
--- a/packages/theme-default/src/components/Badge/index.tsx
+++ b/packages/theme-default/src/components/Badge/index.tsx
@@ -1,4 +1,4 @@
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface BadgeProps {
   /**
diff --git a/packages/theme-default/src/components/Button/index.tsx b/packages/theme-default/src/components/Button/index.tsx
index c9c22dc904..83c9848be9 100644
--- a/packages/theme-default/src/components/Button/index.tsx
+++ b/packages/theme-default/src/components/Button/index.tsx
@@ -1,6 +1,6 @@
 import { Link } from '@theme';
 import React from 'react';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface ButtonProps {
   type?: string;
diff --git a/packages/theme-default/src/components/DocFooter/index.tsx b/packages/theme-default/src/components/DocFooter/index.tsx
index e0c27fb2ff..ce834298c1 100644
--- a/packages/theme-default/src/components/DocFooter/index.tsx
+++ b/packages/theme-default/src/components/DocFooter/index.tsx
@@ -5,7 +5,7 @@ import {
 import { EditLink, LastUpdated, PrevNextPage } from '@theme';
 import { useLocaleSiteData } from '../../logic/useLocaleSiteData';
 import { usePrevNextPage } from '../../logic/usePrevNextPage';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export function DocFooter() {
   const { prevPage, nextPage } = usePrevNextPage();
diff --git a/packages/theme-default/src/components/EditLink/index.tsx b/packages/theme-default/src/components/EditLink/index.tsx
index 5f513df589..7ff1168093 100644
--- a/packages/theme-default/src/components/EditLink/index.tsx
+++ b/packages/theme-default/src/components/EditLink/index.tsx
@@ -1,5 +1,5 @@
 import { useEditLink } from '../../logic/useEditLink';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export function EditLink() {
   const editLinkObj = useEditLink();
diff --git a/packages/theme-default/src/components/HomeFeature/index.tsx b/packages/theme-default/src/components/HomeFeature/index.tsx
index dca963c996..220052db19 100644
--- a/packages/theme-default/src/components/HomeFeature/index.tsx
+++ b/packages/theme-default/src/components/HomeFeature/index.tsx
@@ -3,13 +3,24 @@ import { isExternalUrl, withBase } from '@rspress/shared';
 import type { Feature, FrontMatterMeta } from '@rspress/shared';
 
 import { renderHtmlOrText } from '../../logic/utils';
-import styles from './index.module.scss';
-
-const GRID_PREFIX = 'grid-';
+import * as styles from './index.module.scss';
 
 const getGridClass = (feature: Feature): string => {
   const { span } = feature;
-  return `${GRID_PREFIX}${span || 4}`;
+  switch (span) {
+    case 2:
+      return styles.grid2;
+    case 3:
+      return styles.grid3;
+    case 4:
+      return styles.grid4;
+    case 6:
+      return styles.grid6;
+    case undefined:
+      return styles.grid4;
+    default:
+      return '';
+  }
 };
 
 export function HomeFeature({
@@ -36,9 +47,9 @@ export function HomeFeature({
         return (
           <div
             key={title}
-            className={`${
-              styles[getGridClass(feature)]
-            } rounded hover:var(--rp-c-brand)`}
+            className={`${getGridClass(
+              feature,
+            )} rounded hover:var(--rp-c-brand)`}
           >
             <div className="h-full p-2">
               <article
diff --git a/packages/theme-default/src/components/HomeHero/index.tsx b/packages/theme-default/src/components/HomeHero/index.tsx
index 3569ef5308..6a399f8a30 100644
--- a/packages/theme-default/src/components/HomeHero/index.tsx
+++ b/packages/theme-default/src/components/HomeHero/index.tsx
@@ -4,7 +4,7 @@ import type { FrontMatterMeta } from '@rspress/shared';
 import { Button } from '@theme';
 
 import { renderHtmlOrText } from '../../logic/utils';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 const DEFAULT_HERO = {
   name: '',
diff --git a/packages/theme-default/src/components/Link/index.tsx b/packages/theme-default/src/components/Link/index.tsx
index 71106a4bab..7d8e983f29 100644
--- a/packages/theme-default/src/components/Link/index.tsx
+++ b/packages/theme-default/src/components/Link/index.tsx
@@ -11,7 +11,7 @@ import nprogress from 'nprogress';
 import type React from 'react';
 import type { ComponentProps } from 'react';
 import { scrollToTarget } from '../../logic/sideEffects';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export interface LinkProps extends ComponentProps<'a'> {
   href?: string;
diff --git a/packages/theme-default/src/components/LinkCard/index.tsx b/packages/theme-default/src/components/LinkCard/index.tsx
index c17f6d4107..88852beddf 100644
--- a/packages/theme-default/src/components/LinkCard/index.tsx
+++ b/packages/theme-default/src/components/LinkCard/index.tsx
@@ -1,5 +1,5 @@
 import ArrowRight from '@theme-assets/arrow-right';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface LinkCardProps {
   /**
diff --git a/packages/theme-default/src/components/Nav/NavBarTitle.tsx b/packages/theme-default/src/components/Nav/NavBarTitle.tsx
index 1a498e83e9..5d5d5f3300 100644
--- a/packages/theme-default/src/components/Nav/NavBarTitle.tsx
+++ b/packages/theme-default/src/components/Nav/NavBarTitle.tsx
@@ -2,7 +2,7 @@ import { normalizeImagePath, usePageData } from '@rspress/runtime';
 import { Link } from '@theme';
 import { useMemo } from 'react';
 import { useLocaleSiteData } from '../../logic/useLocaleSiteData';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export const NavBarTitle = () => {
   const { siteData } = usePageData();
diff --git a/packages/theme-default/src/components/Nav/NavMenuSingleItem.tsx b/packages/theme-default/src/components/Nav/NavMenuSingleItem.tsx
index ad5ba0f2c0..1e06f94b65 100644
--- a/packages/theme-default/src/components/Nav/NavMenuSingleItem.tsx
+++ b/packages/theme-default/src/components/Nav/NavMenuSingleItem.tsx
@@ -5,7 +5,7 @@ import {
   withoutBase,
 } from '@rspress/shared';
 import { Link, Tag } from '@theme';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface Props {
   pathname: string;
diff --git a/packages/theme-default/src/components/Nav/NavTranslations.tsx b/packages/theme-default/src/components/Nav/NavTranslations.tsx
index fc37272b21..c29bd95627 100644
--- a/packages/theme-default/src/components/Nav/NavTranslations.tsx
+++ b/packages/theme-default/src/components/Nav/NavTranslations.tsx
@@ -1,5 +1,5 @@
 import { NavMenuGroup } from './NavMenuGroup';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import { useTranslationMenuData } from './menuDataHooks';
 
 export function NavTranslations() {
diff --git a/packages/theme-default/src/components/Nav/NavVersions.tsx b/packages/theme-default/src/components/Nav/NavVersions.tsx
index bc22216bb2..e203d1d552 100644
--- a/packages/theme-default/src/components/Nav/NavVersions.tsx
+++ b/packages/theme-default/src/components/Nav/NavVersions.tsx
@@ -1,5 +1,5 @@
 import { NavMenuGroup } from './NavMenuGroup';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import { useVersionMenuData } from './menuDataHooks';
 
 export function NavVersions() {
diff --git a/packages/theme-default/src/components/Nav/index.tsx b/packages/theme-default/src/components/Nav/index.tsx
index c416f394d4..9e6f49f0b3 100644
--- a/packages/theme-default/src/components/Nav/index.tsx
+++ b/packages/theme-default/src/components/Nav/index.tsx
@@ -13,7 +13,7 @@ import { NavMenuGroup } from './NavMenuGroup';
 import { NavMenuSingleItem } from './NavMenuSingleItem';
 import { NavTranslations } from './NavTranslations';
 import { NavVersions } from './NavVersions';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export interface NavProps {
   beforeNav?: React.ReactNode;
diff --git a/packages/theme-default/src/components/NavHamburger/index.tsx b/packages/theme-default/src/components/NavHamburger/index.tsx
index 24f3dde9ee..2bae83df9f 100644
--- a/packages/theme-default/src/components/NavHamburger/index.tsx
+++ b/packages/theme-default/src/components/NavHamburger/index.tsx
@@ -3,7 +3,7 @@ import SmallMenu from '@theme-assets/small-menu';
 import { useNavScreen } from '../../logic/useNav';
 import { NavScreen } from '../NavScreen';
 import { SvgWrapper } from '../SvgWrapper';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface Props {
   siteData: SiteData<DefaultThemeConfig>;
diff --git a/packages/theme-default/src/components/NavScreen/NavScreenMenuGroup.tsx b/packages/theme-default/src/components/NavScreen/NavScreenMenuGroup.tsx
index d9ee55ed58..a003575693 100644
--- a/packages/theme-default/src/components/NavScreen/NavScreenMenuGroup.tsx
+++ b/packages/theme-default/src/components/NavScreen/NavScreenMenuGroup.tsx
@@ -7,7 +7,7 @@ import type {
 import { Link } from '@theme';
 import Down from '@theme-assets/down';
 import { useState } from 'react';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export interface NavScreenMenuGroupItem {
   text?: string | React.ReactElement;
diff --git a/packages/theme-default/src/components/NavScreen/index.tsx b/packages/theme-default/src/components/NavScreen/index.tsx
index 1e0578604b..60feb1af82 100644
--- a/packages/theme-default/src/components/NavScreen/index.tsx
+++ b/packages/theme-default/src/components/NavScreen/index.tsx
@@ -12,7 +12,7 @@ import {
 import { SocialLinks } from '../SocialLinks';
 import { SwitchAppearance } from '../SwitchAppearance';
 import { NavScreenMenuGroup } from './NavScreenMenuGroup';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface Props {
   isScreenOpen: boolean;
@@ -35,9 +35,7 @@ const NavScreenTranslations = () => {
 const NavScreenVersions = () => {
   const versionMenuData = useVersionMenuData();
   return (
-    <div
-      className={`${styles.navTranslations} flex text-sm font-bold justify-center`}
-    >
+    <div className={'flex text-sm font-bold justify-center'}>
       <div className="mx-1.5 my-1">
         <NavScreenMenuGroup {...versionMenuData} />
       </div>
diff --git a/packages/theme-default/src/components/Overview/index.tsx b/packages/theme-default/src/components/Overview/index.tsx
index 623ee73f84..04e89a11ec 100644
--- a/packages/theme-default/src/components/Overview/index.tsx
+++ b/packages/theme-default/src/components/Overview/index.tsx
@@ -16,7 +16,7 @@ import { useLocaleSiteData } from '../../logic/useLocaleSiteData';
 import { useSidebarData } from '../../logic/useSidebarData';
 import { renderInlineMarkdown } from '../../logic/utils';
 import { isSidebarDivider, isSidebarSingleFile } from '../Sidebar/utils';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import { findItemByRoutePath } from './utils';
 
 interface GroupItem {
diff --git a/packages/theme-default/src/components/PrevNextPage/index.tsx b/packages/theme-default/src/components/PrevNextPage/index.tsx
index d60e7e456c..0bcba2c382 100644
--- a/packages/theme-default/src/components/PrevNextPage/index.tsx
+++ b/packages/theme-default/src/components/PrevNextPage/index.tsx
@@ -1,7 +1,7 @@
 import { Link } from '@theme';
 import { useLocaleSiteData } from '../../logic/useLocaleSiteData';
 import { preloadLink } from '../Sidebar/utils';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface PrevNextPageProps {
   type: 'prev' | 'next';
diff --git a/packages/theme-default/src/components/ScrollToTop/index.tsx b/packages/theme-default/src/components/ScrollToTop/index.tsx
index 6e584d9284..c54551817e 100644
--- a/packages/theme-default/src/components/ScrollToTop/index.tsx
+++ b/packages/theme-default/src/components/ScrollToTop/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export function ScrollToTop() {
   const [isVisible, setIsVisible] = useState(false);
diff --git a/packages/theme-default/src/components/Search/SearchButton.tsx b/packages/theme-default/src/components/Search/SearchButton.tsx
index bf6159473a..e3b4dd87f5 100644
--- a/packages/theme-default/src/components/Search/SearchButton.tsx
+++ b/packages/theme-default/src/components/Search/SearchButton.tsx
@@ -2,7 +2,7 @@ import SearchSvg from '@theme-assets/search';
 import { useEffect, useState } from 'react';
 import { useLocaleSiteData } from '../../logic/useLocaleSiteData';
 import { SvgWrapper } from '../SvgWrapper';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export interface SearchButtonProps {
   setFocused: (focused: boolean) => void;
diff --git a/packages/theme-default/src/components/Search/SearchPanel.tsx b/packages/theme-default/src/components/Search/SearchPanel.tsx
index c725024b03..391ade9f54 100644
--- a/packages/theme-default/src/components/Search/SearchPanel.tsx
+++ b/packages/theme-default/src/components/Search/SearchPanel.tsx
@@ -16,7 +16,7 @@ import { SvgWrapper } from '../SvgWrapper';
 import { Tab, Tabs } from '../Tabs';
 import { NoSearchResult } from './NoSearchResult';
 import { SuggestItem } from './SuggestItem';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import { PageSearcher } from './logic/search';
 import type {
   CustomMatchResult,
@@ -459,7 +459,7 @@ export function SearchPanel({ focused, setFocused }: SearchPanelProps) {
     // accumulateIndex is used to calculate the index of the suggestion in the whole list.
     let accumulateIndex = -1;
     return (
-      <ul className={styles.suggestList}>
+      <ul>
         {Object.keys(normalizedSuggestions).map(group => {
           const groupSuggestions = normalizedSuggestions[group] || [];
           return (
diff --git a/packages/theme-default/src/components/Search/SuggestItem.tsx b/packages/theme-default/src/components/Search/SuggestItem.tsx
index 918db3af3e..404e110f87 100644
--- a/packages/theme-default/src/components/Search/SuggestItem.tsx
+++ b/packages/theme-default/src/components/Search/SuggestItem.tsx
@@ -5,7 +5,7 @@ import JumpSvg from '@theme-assets/jump';
 import TitleSvg from '@theme-assets/title';
 import { useRef } from 'react';
 import { SvgWrapper } from '../SvgWrapper';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import type { DefaultMatchResultItem, HighlightInfo } from './logic/types';
 import { getSlicedStrByByteLength, removeDomain } from './logic/util';
 
@@ -134,7 +134,7 @@ export function SuggestItem({
         target={inCurrentDocIndex ? '_self' : '_blank'}
       >
         <div className={styles.suggestItemContainer}>
-          <div className={styles.hitIcon}>
+          <div>
             <SvgWrapper icon={HitIcon} />
           </div>
           <div className={styles.contentWrapper}>
diff --git a/packages/theme-default/src/components/Sidebar/SidebarGroup.tsx b/packages/theme-default/src/components/Sidebar/SidebarGroup.tsx
index 53109cb507..ab3c8a09e5 100644
--- a/packages/theme-default/src/components/Sidebar/SidebarGroup.tsx
+++ b/packages/theme-default/src/components/Sidebar/SidebarGroup.tsx
@@ -13,7 +13,7 @@ import { renderInlineMarkdown } from '../../logic/utils';
 import { SvgWrapper } from '../SvgWrapper';
 import { SidebarDivider } from './SidebarDivider';
 import { SidebarItem as SidebarItemComp } from './SidebarItem';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import { isSidebarDivider, preloadLink } from './utils';
 
 export function SidebarGroup(props: SidebarItemProps) {
diff --git a/packages/theme-default/src/components/Sidebar/SidebarItem.tsx b/packages/theme-default/src/components/Sidebar/SidebarItem.tsx
index 63f2c59a62..b1a6842ce3 100644
--- a/packages/theme-default/src/components/Sidebar/SidebarItem.tsx
+++ b/packages/theme-default/src/components/Sidebar/SidebarItem.tsx
@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react';
 import { type SidebarItemProps, highlightTitleStyle } from '.';
 import { renderInlineMarkdown } from '../../logic/utils';
 import { SidebarGroup } from './SidebarGroup';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import { preloadLink } from './utils';
 
 export function SidebarItem(props: SidebarItemProps) {
diff --git a/packages/theme-default/src/components/Sidebar/index.tsx b/packages/theme-default/src/components/Sidebar/index.tsx
index 406a7778c6..04612a3136 100644
--- a/packages/theme-default/src/components/Sidebar/index.tsx
+++ b/packages/theme-default/src/components/Sidebar/index.tsx
@@ -15,7 +15,7 @@ import { SidebarItem } from './SidebarItem';
 import { SidebarSectionHeader } from './SidebarSectionHeader';
 
 import { useSidebarData } from '../../logic/useSidebarData';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import {
   isSideBarCustomLink,
   isSidebarDivider,
diff --git a/packages/theme-default/src/components/SocialLinks/LinkContent.tsx b/packages/theme-default/src/components/SocialLinks/LinkContent.tsx
index 8b2dfd930f..293a6dd823 100644
--- a/packages/theme-default/src/components/SocialLinks/LinkContent.tsx
+++ b/packages/theme-default/src/components/SocialLinks/LinkContent.tsx
@@ -1,6 +1,6 @@
 import type { SocialLink } from '@rspress/shared';
 import { useState } from 'react';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 declare const process: {
   env: {
diff --git a/packages/theme-default/src/components/SocialLinks/index.tsx b/packages/theme-default/src/components/SocialLinks/index.tsx
index cf429595e3..6fdf1e6f01 100644
--- a/packages/theme-default/src/components/SocialLinks/index.tsx
+++ b/packages/theme-default/src/components/SocialLinks/index.tsx
@@ -2,7 +2,7 @@ import type { SocialLink } from '@rspress/shared';
 import { useCallback, useState } from 'react';
 import { HiddenLinks } from './HiddenLinks';
 import { ShownLinks } from './ShownLinks';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 const MORE_LENGTH = 5;
 
diff --git a/packages/theme-default/src/components/SourceCode/index.tsx b/packages/theme-default/src/components/SourceCode/index.tsx
index b50f3b25e2..d2815688fc 100644
--- a/packages/theme-default/src/components/SourceCode/index.tsx
+++ b/packages/theme-default/src/components/SourceCode/index.tsx
@@ -2,7 +2,7 @@ import Github from '@theme-assets/github';
 import Gitlab from '@theme-assets/gitlab';
 import { useLocaleSiteData } from '../../logic/useLocaleSiteData';
 import { SvgWrapper } from '../SvgWrapper';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 interface SourceCodeProps {
   href: string;
diff --git a/packages/theme-default/src/components/Steps/index.tsx b/packages/theme-default/src/components/Steps/index.tsx
index c96e4abc3c..558a74f79f 100644
--- a/packages/theme-default/src/components/Steps/index.tsx
+++ b/packages/theme-default/src/components/Steps/index.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export function Steps({ children }: { children: ReactNode }) {
   return (
diff --git a/packages/theme-default/src/components/Tabs/index.tsx b/packages/theme-default/src/components/Tabs/index.tsx
index 74f109bccb..e635607dae 100644
--- a/packages/theme-default/src/components/Tabs/index.tsx
+++ b/packages/theme-default/src/components/Tabs/index.tsx
@@ -13,7 +13,7 @@ import {
 } from 'react';
 import { TabDataContext } from '../../logic/TabDataContext';
 import { useStorageValue } from '../../logic/useStorageValue';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 type TabItem = {
   value?: string;
diff --git a/packages/theme-default/src/global.d.ts b/packages/theme-default/src/global.d.ts
index b0f81bf76a..fd0c577007 100644
--- a/packages/theme-default/src/global.d.ts
+++ b/packages/theme-default/src/global.d.ts
@@ -5,11 +5,8 @@ declare module 'virtual-site-data' {
   export default data;
 }
 
-declare module '*.module.scss' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
+// for the first build when generating the module.scss.d.ts
+declare module '*.module.scss';
 declare module '@theme-assets/*' {
   const SvgIcon: React.FC<React.SVGProps<SVGSVGElement>> | string;
   export default SvgIcon;
diff --git a/packages/theme-default/src/layout/DocLayout/docComponents/code/CopyCodeButton.tsx b/packages/theme-default/src/layout/DocLayout/docComponents/code/CopyCodeButton.tsx
index 5135d7009d..9201d470f7 100644
--- a/packages/theme-default/src/layout/DocLayout/docComponents/code/CopyCodeButton.tsx
+++ b/packages/theme-default/src/layout/DocLayout/docComponents/code/CopyCodeButton.tsx
@@ -3,7 +3,7 @@ import IconSuccess from '@theme-assets/success';
 import copy from 'copy-to-clipboard';
 import { useRef } from 'react';
 import { SvgWrapper } from '../../../../components/SvgWrapper';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 const timeoutIdMap: Map<HTMLElement, NodeJS.Timeout> = new Map();
 
diff --git a/packages/theme-default/src/layout/DocLayout/docComponents/code/index.tsx b/packages/theme-default/src/layout/DocLayout/docComponents/code/index.tsx
index 4a014a772c..0ff2a3bbc7 100644
--- a/packages/theme-default/src/layout/DocLayout/docComponents/code/index.tsx
+++ b/packages/theme-default/src/layout/DocLayout/docComponents/code/index.tsx
@@ -5,7 +5,7 @@ import { useRef, useState } from 'react';
 import { SvgWrapper } from '../../../../components/SvgWrapper';
 import { CopyCodeButton } from './CopyCodeButton';
 import { PrismSyntaxHighlighter } from './PrismSyntaxHighlighter';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export interface CodeProps {
   children: string;
@@ -68,7 +68,6 @@ export function Code(props: CodeProps) {
       <div className={styles.codeButtonGroup}>
         <button
           ref={wrapButtonRef}
-          className={styles.codeWrapButton}
           onClick={() => toggleCodeWrap(wrapButtonRef.current)}
           title="Toggle code wrap"
         >
diff --git a/packages/theme-default/src/layout/DocLayout/docComponents/link.tsx b/packages/theme-default/src/layout/DocLayout/docComponents/link.tsx
index c6222a1c3e..60e7bf5534 100644
--- a/packages/theme-default/src/layout/DocLayout/docComponents/link.tsx
+++ b/packages/theme-default/src/layout/DocLayout/docComponents/link.tsx
@@ -1,7 +1,7 @@
 import { Link } from '@theme';
 import type { ComponentProps } from 'react';
 import { usePathUtils } from '../../../logic/usePathUtils';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export const A = (props: ComponentProps<'a'>) => {
   const { href = '', className = '' } = props;
@@ -15,7 +15,7 @@ export const A = (props: ComponentProps<'a'>) => {
   return (
     <Link
       {...props}
-      className={`${className} ${styles.link} ${styles['inline-link']}`}
+      className={`${className} ${styles.link} ${styles.inlineLink}`}
       href={normalizeLinkHref(href)}
     />
   );
diff --git a/packages/theme-default/src/layout/DocLayout/docComponents/paragraph.tsx b/packages/theme-default/src/layout/DocLayout/docComponents/paragraph.tsx
index 2e1bf02882..d3ac538598 100644
--- a/packages/theme-default/src/layout/DocLayout/docComponents/paragraph.tsx
+++ b/packages/theme-default/src/layout/DocLayout/docComponents/paragraph.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export const P = (props: ComponentProps<'p'>) => {
   return <p {...props} className="my-4 leading-7" />;
diff --git a/packages/theme-default/src/layout/DocLayout/docComponents/title.tsx b/packages/theme-default/src/layout/DocLayout/docComponents/title.tsx
index bc6dfd47fd..eea8aa139c 100644
--- a/packages/theme-default/src/layout/DocLayout/docComponents/title.tsx
+++ b/packages/theme-default/src/layout/DocLayout/docComponents/title.tsx
@@ -1,5 +1,5 @@
 import type React from 'react';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export const H1 = (props: React.ComponentProps<'h1'>) => {
   return (
diff --git a/packages/theme-default/src/layout/DocLayout/index.tsx b/packages/theme-default/src/layout/DocLayout/index.tsx
index 70b499f829..3b154d8e66 100644
--- a/packages/theme-default/src/layout/DocLayout/index.tsx
+++ b/packages/theme-default/src/layout/DocLayout/index.tsx
@@ -12,7 +12,7 @@ import { useLocaleSiteData } from '../../logic/useLocaleSiteData';
 import type { UISwitchResult } from '../../logic/useUISwitch';
 import { A } from './docComponents/link';
 import { H1 } from './docComponents/title';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 
 export interface DocLayoutProps {
   beforeSidebar?: React.ReactNode;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7384bc6090..6133c90f8e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1730,6 +1730,9 @@ importers:
       '@rsbuild/plugin-svgr':
         specifier: ^1.0.7
         version: 1.0.7(@rsbuild/core@1.2.19)(typescript@5.8.2)
+      '@rsbuild/plugin-typed-css-modules':
+        specifier: ~1.0.2
+        version: 1.0.2(@rsbuild/core@1.2.19)
       '@rslib/core':
         specifier: 0.5.4
         version: 0.5.4(@microsoft/api-extractor@7.52.1(@types/node@22.10.2))(typescript@5.8.2)
@@ -3445,6 +3448,14 @@ packages:
     peerDependencies:
       '@rsbuild/core': 1.x
 
+  '@rsbuild/plugin-typed-css-modules@1.0.2':
+    resolution: {integrity: sha512-QX376pBXWeBrZBvYLP2HGGrHiWA5O0SDHwRoBNto5BqYDXhi6y+Eol2Hb/cY+h2ARKZVanMfUiJRABULOJ/FCQ==}
+    peerDependencies:
+      '@rsbuild/core': 1.x || ^1.0.1-beta.0
+    peerDependenciesMeta:
+      '@rsbuild/core':
+        optional: true
+
   '@rslib/core@0.5.4':
     resolution: {integrity: sha512-rJ+wG++/Y8SbyuJB1RhlgnOUPzsxubD0lBivZWXVhOGawAea7mUoI4kZQ6YmF0iybW1QA61wHOf3FY+R1BxvgQ==}
     engines: {node: '>=16.7.0'}
@@ -9445,6 +9456,10 @@ snapshots:
       - supports-color
       - typescript
 
+  '@rsbuild/plugin-typed-css-modules@1.0.2(@rsbuild/core@1.2.19)':
+    optionalDependencies:
+      '@rsbuild/core': 1.2.19
+
   '@rslib/core@0.5.4(@microsoft/api-extractor@7.52.1(@types/node@18.11.17))(typescript@5.8.2)':
     dependencies:
       '@rsbuild/core': 1.2.19