如何将全局 css 转换为 css 模块？

Posted 2023-03-21

【中文标题】如何将全局 css 转换为 css 模块？

【英文标题】：How to transform global css into css modules?

【发布时间】：2022-01-22 03:47:33

【问题描述】：

我在 nextjs 项目中使用 react-bootstrap 和 bootstrap，因此我必须包含全局 css：

// _app.js
import 'bootstrap/dist/css/bootstrap.min.css';

问题是我在每个页面中加载了很多未使用的 css，因此 google lighthouse 降低了我的分数。

我已经尝试清除未使用的 css，即使分数增加了，仍然有未使用的样式。我不需要警报，也不需要无处不在的按钮。我只想在每个特定页面中导入我需要的样式。

有没有办法将全局 css 转换为 css 模块，所以我只导入我需要的东西？也许一些 webpack 配置或类似的？

我可以自己手动将引导代码拆分为组件。但我想知道是否有任何自动的方式来做到这一点。所以我不必为所有需要样式的 node_modules 执行此过程。

【参考方案1】：

这是 Bootstrap 的缺点之一——除了从核心 bootstrap.scss 文件中删除模块并重新编译一个独特的版本之外，没有办法开箱即用地做到这一点。 （例如，从 bootstrap.scss 中删除 @import "accordion"; 以消除手风琴样式）

理论上，您可以将每个导入编译为单独的 .scss 文件并仅在需要时加载 .css，但存在一些细微的相互依赖关系，需要考虑确保某些代码不会重复（例如，变量、重启, 函数）

相反，您很可能只使用几个模块（grid.scss、spacing.scss、buttons.scss）并且可以消除所有其他模块。

【讨论】：

是的，但即使我只导入我需要的全局样式表，我仍然会导入未使用的 css。我的所有页面都不需要按钮（例如）。我认为唯一可行的解​​决方案是将引导程序手动拆分为组件。