ReScript React如何导入CSS文件？迁移现有React项目遇此难题

在ReScript中导入CSS文件（比如Bootstrap），需要结合@module注解和external声明来处理——ReScript需要明确描述JS模块的导入逻辑，单纯的@module注解无法生成有效的导入代码。

正确导入Bootstrap CSS的写法 #

@module("bootstrap/dist/css/bootstrap.min.css") external _: unit = "default"

这段代码会被ReScript编译为你熟悉的JS导入语句：

import "bootstrap/dist/css/bootstrap.min.css";

原理说明 #

CSS文件属于仅副作用的模块（没有导出任何值），我们通过声明一个无意义的外部绑定（用_作为变量名），告诉ReScript编译时生成对应的import语句，同时忽略模块的返回值。这种写法完全兼容Webpack、Vite等主流打包工具的CSS处理逻辑，和你在React中直接导入CSS的效果一致。

本地CSS文件的导入示例 #

如果是导入本地的CSS文件（比如src/styles.css），写法类似：

@module("./styles.css") external _: unit = "default"

内容的提问来源于stack exchange，提问作者Rawley Fowler