nexp-level-001 06 添加组件级 CSS
Next.js 通过 [name].module.css
文件命名约定来支持 CSS 模块 。
CSS 模块通过自动创建唯一的类名从而将 CSS 限定在局部范围内。 这使您可以在不同文件中使用相同的 CSS 类名,而不必担心冲突。
此行为使 CSS 模块成为包含组件级 CSS 的理想方法。 CSS 模块文件 可以导入(import)到应用程序中的任何位置。
例如,假设 components/
目录下有一个可重用 Button
组件:
首先,创建 components/Button.module.css
文件并填入以下内容:
|
|
然后,创建 components/Button.js
文件,导入(import)并使用上述 CSS 文件:
|
|
CSS 模块是一项 可选功能,仅对带有 .module.css
扩展名的文件启用。 普通的 <link>
样式表和全部 CSS 文件仍然是被支持的。
在生产环境中,所有 CSS 模块文件将被自动合并为 多个经过精简和代码分割的 .css
文件。 这些 .css
文件代表应用程序中的热执行路径(hot execution paths),从而确保为应用程序绘制页面加载所需的最少的 CSS。
- 原文作者:知识铺
- 原文链接:https://geek.zshipu.com/post/nexp/level001/nexp-level-001-06-%E6%B7%BB%E5%8A%A0%E7%BB%84%E4%BB%B6%E7%BA%A7-CSS/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。
- 免责声明:本页面内容均来源于站内编辑发布,部分信息来源互联网,并不意味着本站赞同其观点或者证实其内容的真实性,如涉及版权等问题,请立即联系客服进行更改或删除,保证您的合法权益。转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com