如何在React中程序性地导入node_modules中的CSS文件？

Question

我正在开发一个网站，需要在深色模式和浅色模式之间切换。这两种模式分别使用了来自node_modules（一个包）中的不同CSS文件。那么，如何动态地从node_modules中导入并使用CSS文件呢？

常规的import语句import cssfile from 'package-name/path/to/cssfile'可以正常工作，但是将link标签的href属性设置为'package-name/path/to/cssfile'时会出现“未找到”错误。

当通过import语句导入CSS文件时，这些文件是有效的。然而，需求是在切换模式时根据需要导入相应的文件。

wim · Answer

您不能直接按照那种方式操作，因为在运行时无法直接访问node_modules中的包。

在您的项目中，您需要声明两个CSS文件，比如“dark.css”和“light.css”。

在dark.css文件中，您可以使用@import（或者根据您使用的预处理器如sass、less等选择合适的方式）来导入来自node_modules中的CSS：
@import '_package-name/path/to/cssfile_dark'
对light.css文件也需进行相同的操作。

这样，在构建项目时，将会生成两个CSS文件（请检查配置以确保同时添加它们），dark.css和light.css将在运行时可被访问，意味着可以使用href链接引用它们。

祝好，

EL

Littlefoot · Answer

我认为这不是一个动态加载CSS的问题。

对于根本解决方案，深色模式的实现方式需要有所不同。

选项1：动态切换标签（不推荐您尝试的方法）。
- 不建议这样做，因为这可能导致样式冲突或样式延迟问题。
- 若要实现这一点，您首先需要将node_modules中的CSS文件复制到公共目录，或者按照Errol Lebron（StackOverflow用户链接）的方式操作（可能需要调整构建设置）。
选项2：在诸如或等标签上切换用于标识深色模式的类或属性。
- 例如：参考tailwindcss - 'class'策略
- 这种方法可能需要对您的CSS进行全面编辑。不过，借助PostCSS工具可以简化这个过程。