跳到主要内容

css module

CSS模块（CSS Modules）是一种用于解决CSS命名冲突和作用域隔离问题的技术。它通过在编译阶段为CSS样式表生成唯一的类名，以确保样式的作用范围仅限于其所属的组件或模块。 Next.js 内置了对使用扩展 .module.css 的 CSS 模块的支持。

Example​

next.js仅对 .module.css 扩展名的文件启用css module。

app/dashboard/layout.jsx
import styles from './styles.module.css'
 
export default function DashboardLayout({ children }) {
  return <section className={styles.dashboard}>{children}</section>
}

typescript-plugin-css-modules​

如果你的项目使用了 typescript，推荐一个插件 typescript-plugin-css-modules, 这个插件可以让你在编写 className 时，智能提示css module的类名。

使用步骤如下：

  1. 安装插件：npm i typescript-plugin-css-modules -D
  2. 配置tsconfig.json:
tsconfig.json
{
  "compilerOptions": {
    "plugins": [
      { "name": "typescript-plugin-css-modules" }
    ]
  }
}
  1. 配置.vscode/settings.json:
.vscode/settings.json
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}