CSS 模块
CSS 模块
在这个课程平台上,我有一个“Sidenote”组件,用于添加附带信息。你可能已经注意到了,它们看起来像这样:
让我们构建这个组件的简化版本!
这是一个粗略的草图,就道具和标记而言:
这就是我们如何使用 CSS Modules 进行样式设置的:
这里发生了很多奇怪的事情。我会准确解释这一切是如何运作的,但首先,我建议你花几分钟亲自试试!
例如,你认为 styles 导入的是什么?猜一下,然后通过 console.log(styles) 记录下来看看你是否正确。
在你稍微研究一下这个例子后,观看这个视频以获取深入的解释:
您可以在 Webpack “Tools of the Trade” 额外课程中了解更多关于 Webpack 的信息 👀。
命名“styles”导入
在一些 CSS Modules 的教程中,导入被命名为“classes”而不是“styles”:
最终,这都是一样的。Webpack 将 CSS 模块视为“默认导出”,因此我们可以随便给它命名。
有关更多信息,请查看 JS 入门中的“JavaScript 模块”课程 👀。