7、Gatsby 中 CSS 使用与插件扩展全解析

Gatsby 中 CSS 使用与插件扩展全解析

1. Gatsby 中 CSS 使用的基础问题

在 Gatsby 里，直接导入 CSS 文件虽然能实现样式与组件的分离，让工作流更独立，但却无法充分利用 Gatsby 对 CSS 性能的优化。因为这种方式没有采用布局组件策略，Gatsby 也无法自行管理样式，还会失去像死代码消除这类 CSS 性能增强特性。而且，这些样式表需要全局命名空间，比如 footer.css 文件使用全局选择器时，其样式会应用到整个网站，而非仅局限于页脚组件，这就会带来和全局样式表类似的问题。

2. 模块化样式：CSS Modules

Gatsby 提供了两种为组件添加局部样式的方法，CSS Modules 就是其中之一。CSS Modules 是一种编写组件作用域 CSS 的知名方式，它能让所有类名（和动画名）默认实现局部作用域。在 CSS Modules 中，CSS 样式会变成在组件间传递的 JavaScript 对象，由于它会自动为类和动画分配唯一名称，所以不同组件中同名选择器不会发生冲突。

下面是将传统 CSS 转换为 CSS Modules 的具体步骤：
1. 重命名并移动 CSS 文件 ：把 CSS 文件重命名并移动到 src/components/footer.module.css 。
2. 修改 CSS 文件内容 ：

/* src/components/footer.module.css *