https://rsbuild.rs/static/js/async/route-3cf0757951bd.7fa2de8e65.js

1"use strict";(self.rspackChunkrsbuild_website=self.rspackChunkrsbuild_website||[]).push([["ck"],{rJ(s,e,r){r.r(e);var n=r("E"),l=r("H"),o=r("x");function i(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,l.R)(),...s.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h1,{id:"css-modules",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#css-modules",children:"#"}),"CSS Modules"]}),"\n",(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:"https://github.com/css-modules/css-modules",rel:"noopener noreferrer",target:"_blank",children:"CSS Modules"})," 让我们能以模块化的方式编写 CSS 代码，并且可以在 JavaScript 文件中导入和使用这些样式。使用 CSS Modules 可以自动生成唯一的类名，隔离不同模块之间的样式，避免类名冲突。"]}),"\n",(0,n.jsxs)(e.p,{children:["Rsbuild 默认支持使用 CSS Modules，无需添加额外的配置。我们约定使用 ",(0,n.jsx)(e.code,{children:"[name].module.css"})," 文件名来启用 CSS Modules。"]}),"\n",(0,n.jsx)(e.p,{children:"以下样式文件会被视为 CSS Modules："}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:"*.module.css"})}),"\n",(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:"*.module.less"})}),"\n",(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:"*.module.sass"})}),"\n",(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:"*.module.scss"})}),"\n",(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:"*.module.styl"})}),"\n",(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:"*.module.stylus"})}),"\n"]}),"\n",(0,n.jsxs)(e.h2,{id:"用法示例",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#用法示例",children:"#"}),"用法示例"]}),"\n",(0,n.jsxs)(e.p,{children:["在 ",(0,n.jsx)(e.code,{children:"*.module.css"})," 文件中编写样式："]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"button.module.css",lang:"css",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".red"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"  background"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" red"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsx)(e.p,{children:"在 JavaScript 文件中导入样式："}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"Button.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" styles "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './button.module.css'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"styles"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".red}>Button</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsx)(e.p,{children:"经过编译后，CSS Modules 中的类名会自动添加一个哈希值，以避免类名冲突："}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"css",children:(0,n.jsxs)(e.code,{children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"/* 开发模式下生成的类名 */"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".src-App-module__red-hiQIE4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"  background"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" red"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"/* 生产模式下生成的类名 */"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".red-hiQIE4"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"  background"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" red"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsx)(o.Pq,{type:"tip",title:"Tip",children:(0,n.jsxs)(e.p,{children:["\n参考 ",(0,n.jsx)(e.a,{href:"#custom-class-names",children:"自定义类名"})," 来修改生成类名的规则。"]})}),"\n",(0,n.jsxs)(e.h2,{id:"具名导入",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#具名导入",children:"#"}),"具名导入"]}),"\n",(0,n.jsxs)(e.p,{children:["如果你倾向于在 CSS Modules 中使用具名导入，可以通过 ",(0,n.jsx)(e.a,{href:"/zh/config/output/css-modules.html#cssmodulesnamedexport",children:"output.cssModules.namedExport"})," 配置项来开启。"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"rsbuild.config.ts",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  output"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    cssModules"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"      namedExport"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsx)(e.p,{children:"开启后，你可以通过具名导入来引用类名："}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"Button.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { red } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './button.module.css'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{red}>Button</"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(e.h2,{id:"css-modules-识别规则",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#css-modules-识别规则",children:"#"}),"CSS Modules 识别规则"]}),"\n",(0,n.jsxs)(e.p,{children:["在默认情况下，只有 ",(0,n.jsx)(e.code,{children:"*.module.css"})," 结尾的文件才被视为 CSS Modules 模块。"]}),"\n",(0,n.jsxs)(e.p,{children:["如果你想将其他 CSS 文件也当做 CSS Modules 模块进行处理，可以通过配置 ",(0,n.jsx)(e.a,{href:"/zh/config/output/css-modules.html#cssmodulesauto",children:"output.cssModules.auto"})," 来实现。"]}),"\n",(0,n.jsx)(e.p,{children:"比如："}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  output"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    cssModules"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"      auto"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (resource) "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"        return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" resource"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".includes"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'.module.'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"||"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" resource"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".includes"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'shared/'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"      }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsx)(e.p,{children:"设置后，以下两个文件都会被视为 CSS Modules："}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-vari

1ables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" styles1 "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './foo.module.css'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" styles2 "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './shared/bar.css'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})]})})}),"\n",(0,n.jsxs)(e.h2,{id:"custom-class-names",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-class-names",children:"#"}),"自定义类名"]}),"\n",(0,n.jsxs)(e.p,{children:["自定义 CSS Modules 生成的类名也是我们比较常用的功能，你可以使用 ",(0,n.jsx)(e.a,{href:"/zh/config/output/css-modules.html#cssmoduleslocalidentname",children:"output.cssModules.localIdentName"})," 来进行配置。"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  output"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    cssModules"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"      localIdentName"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '[hash:base64:4]'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"    }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["如果你需要自定义 CSS Modules 的其他配置，可以通过 ",(0,n.jsx)(e.a,{href:"/zh/config/output/css-modules.html",children:"output.cssModules"})," 进行设置。"]}),"\n",(0,n.jsxs)(e.h2,{id:"全局样式",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#全局样式",children:"#"}),"全局样式"]}),"\n",(0,n.jsx)(e.p,{children:"在某些情况下，你可能需要在 CSS Modules 中使用全局样式，比如覆盖第三方库的样式，或者为特定元素设置全局样式。"}),"\n",(0,n.jsxs)(e.p,{children:["CSS Modules 提供了 ",(0,n.jsx)(e.code,{children:":global()"})," 伪类选择器来实现这个功能，",(0,n.jsx)(e.code,{children:":global()"})," 内的选择器会保持原始的类名，使它能够正确地匹配全局元素。"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"styles.module.css",lang:"css",children:(0,n.jsxs)(e.code,{children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"/* 本地选择器，会被哈希化 */"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".container"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"  padding"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"/* 全局选择器，不会被哈希化 */"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:":global("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".foo"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"  color"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" red"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"/* 组合使用本地和全局选择器，只有 .wrapper 会被哈希化 */"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".wrapper"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" :global("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".bar"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"  margin"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 10"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["你也可以嵌套使用 ",(0,n.jsx)(e.code,{children:":global()"}),"："]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"card.module.css",lang:"css",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".card"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"  /* 只影响 .card 内部的 .btn 元素 */"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  :"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"global(.btn"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"    background"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" blue"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  }"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsxs)(e.h2,{id:"类型声明",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#类型声明",children:"#"}),"类型声明"]}),"\n",(0,n.jsx)(e.p,{children:"当你在 TypeScript 代码中引用 CSS Modules 时，TypeScript 可能会提示该模块缺少类型定义："}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"txt",children:(0,n.jsx)(e.code,{children:(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{children:"TS2307: Cannot find module './index.module.css' or its corresponding type declarations."})})})})}),"\n",(0,n.jsx)(e.p,{children:"此时你可以使用以下任一方法添加类型声明："}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:["方法一：如果项目里安装了 ",(0,n.jsx)(e.code,{children:"@rsbuild/core"})," 包，你可以在 ",(0,n.jsx)(e.code,{children:"tsconfig.json"})," 中添加 ",(0,n.jsx)(e.code,{children:"@rsbuild/core"})," 提供的 ",(0,n.jsx)(e.a,{href:"/zh/guide/basic/typescript.html#preset-types",children:"预设类型"}),"："]}),"\n"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"tsconfig.json",lang:"json",children:(0,n.jsxs)(e.code,{children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'  "compilerOptions"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:'    "types"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@rsbuild/core/types"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  }"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsx)(e.li,{children:"方法二：手动添加需要的类型声明："}),"\n"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"src/env.d.ts",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"declare"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '*.module.css'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" classes"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"readonly"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" [key"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" classes;"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"declare"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '*.module.scss'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" classes"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"readonly"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" [key"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" classes;"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"declare"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"

1 '*.module.sass'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" classes"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"readonly"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" [key"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" classes;"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"declare"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '*.module.less'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" classes"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"readonly"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" [key"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" classes;"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"declare"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '*.module.styl'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" classes"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"readonly"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" [key"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" classes;"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"declare"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '*.module.stylus'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" classes"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"readonly"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" [key"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" classes;"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsxs)(e.ul,{children:["\n",(0,n.jsxs)(e.li,{children:["方法三：如果你需要使用",(0,n.jsx)(e.strong,{children:"具名导入"}),"来引用类名，可以更松散的类型定义："]}),"\n"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"src/env.d.ts",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"declare"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '*.module.css'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"declare"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '*.module.scss'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"declare"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '*.module.sass'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"declare"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '*.module.less'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"declare"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '*.module.styl'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"declare"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" module"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '*.module.stylus'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})]})})}),"\n",(0,n.jsxs)(e.p,{children:["添加类型声明后，如果依然存在类型错误，请尝试重启当前 IDE，或者调整 ",(0,n.jsx)(e.code,{children:"env.d.ts"})," 所在的目录，使 TypeScript 能够正确识别类型定义。"]}),"\n",(0,n.jsxs)(e.h2,{id:"类型生成",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#类型生成",children:"#"}),"类型生成"]}),"\n",(0,n.jsx)(e.p,{children:"上述方法虽然可以解决 CSS Modules 在 TypeScript 中的类型问题，但是无法准确地提示出 CSS Modules 导出了哪些类名。"}),"\n",(0,n.jsxs)(e.p,{children:["Rsbuild 支持为 CSS Modules 生成准确的类型声明，你只需要开启 ",(0,n.jsx)(e.a,{href:"https://github.com/rstackjs/rsbuild-plugin-typed-css-modules",rel:"noopener noreferrer",target:"_blank",children:"@rsbuild/plugin-typed-css-modules"}),"，再执行构建命令，Rsbuild 就会为项目中所有的 CSS Modules 文件生成类型声明文件。"]}

1),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"rsbuild.config.ts",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { pluginTypedCSSModules } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@rsbuild/plugin-typed-css-modules'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  plugins"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pluginTypedCSSModules"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(e.h3,{id:"示例",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#示例",children:"#"}),"示例"]}),"\n",(0,n.jsxs)(e.p,{children:["例如，创建 ",(0,n.jsx)(e.code,{children:"src/index.ts"})," 和 ",(0,n.jsx)(e.code,{children:"src/index.module.css"})," 两个文件："]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"src/index.ts",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" styles "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './index.module.css'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"console"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".log"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"styles"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".pageHeader);"})]})]})})}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"index.module.css",lang:"css",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".page-header"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"  color"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" black"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["构建后，Rsbuild 会自动生成 ",(0,n.jsx)(e.code,{children:"src/index.module.css.d.ts"})," 类型声明文件："]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"src/index.module.css.d.ts",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" CssExports"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"  'page-header'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  pageHeader"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"declare"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" cssExports"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" CssExports"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" cssExports;"})]})]})})}),"\n",(0,n.jsxs)(e.p,{children:["此时再打开 ",(0,n.jsx)(e.code,{children:"src/index.ts"})," 文件，可以看到 ",(0,n.jsx)(e.code,{children:"styles"})," 对象已经具备了准确的类型。"]})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,l.R)(),...s.components};return e?(0,n.jsx)(e,{...s,children:(0,n.jsx)(i,{...s})}):i(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["zh%2Fguide%2Fstyling%2Fcss-modules.mdx"]={toc:[{id:"用法示例",text:"用法示例",depth:2},{id:"具名导入",text:"具名导入",depth:2},{id:"css-modules-识别规则",text:"CSS Modules 识别规则",depth:2},{id:"custom-class-names",text:"自定义类名",depth:2},{id:"全局样式",text:"全局样式",depth:2},{id:"类型声明",text:"类型声明",depth:2},{id:"类型生成",text:"类型生成",depth:2},{id:"示例",text:"示例",depth:3}],title:"CSS Modules",headingTitle:"CSS Modules",frontmatter:{description:"CSS Modules 让我们能以模块化的方式编写 CSS 代码，并且可以在 JavaScript 文件中导入和使用这些样式。使用 CSS Modules 可以自动生成唯一的类名，隔离不同模块之间的样式，避免类名冲突。"}},r.d(e,{default:()=>a})}}]);