使用CSS Modules时CSS无法加载（ReScript+React+Webpack环境）

我正在尝试用ReScript编写一个简单的React组件，搭配CSS文件并通过Webpack构建。按文档配置Webpack后，CSS始终无法加载。以下是完整项目代码：

Webpack.config.js #

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const outputDir = path.join(__dirname, "build/");

module.exports = {
  mode: "development",
  entry: "./src/Index.bs.js",
  output: {
    path: outputDir,
    filename: "index.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: false
    })    
  ],
  devServer: {
    compress: true, 
    static: outputDir,
    port: 8000
  },
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          'style-loader', 
          { 
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true,
            }
          }
        ]
      }
    ]
  }
}

ReScript组件代码 #

%%raw("import './Tutorial.css'")

@react.component
let make = () => {
  <div>
    <h1>{"Welcome to my app" -> React.string}</h1>
    <ul className="menu">
      <li className="menu-item">{"Company2" -> React.string}</li>
      <li className="menu-item">{"Mission" -> React.string}</li>
      <li className="menu-item">{"Values" -> React.string}</li>
      <li className="menu-item">{"Leadership" -> React.string}</li>
    </ul>
  </div>
}

CSS文件（Tutorial.css） #

.menu {
  list-style-type: none;
}

.menu-item {
  display: inline;
  color: red;
  padding: 0 20px 0 20px;
}

bsconfig.json #

{
  "name": "react-tutorial",
  "version": "0.1.0",
  "sources": {
    "dir" : "src",
    "subdirs" : true
  },
  "package-specs": {
    "module": "es6",
    "in-source": true
  },
  "suffix": ".bs.js",
  "jsx": {"version": 4, "mode": "classic"},
  "bs-dependencies": ["@rescript/react"],
  "reason": {"react-jsx": 3}
}

package.json #

{
  "name": "react-tutorial",
  "version": "0.1.0",
  "scripts": {
    "clean": "npx rescript clean -with-deps",
    "build": "npx rescript build && webpack",
    "watch": "npx rescript build -w",
    "server": "webpack-dev-server"
  },
  "keywords": [
    "ReScript"
  ],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "rescript": "^10.0.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "@rescript/react": "^0.10.3"
  }
}

解决步骤 #

1. 关闭CSS Modules模式
   Webpack配置中开启的modules: true会让css-loader将类名哈希化，导致组件中写的menu、menu-item无法匹配。修改css-loader配置：

   { 
     loader: "css-loader",
     options: {
       importLoaders: 1,
       modules: false, // 改为false，或直接删除该行（默认值为false）
     }
   }
   

2. 修正HtmlWebpackPlugin的inject配置
   当前inject: false会阻止Webpack将打包后的JS注入到HTML中，导致样式无法通过style-loader注入页面。修改为：

   new HtmlWebpackPlugin({
     template: './src/index.html',
     inject: 'body' // 或改为true，默认会注入到body
   })
   

3. 验证编译文件引入
   确认Index.bs.js中正确包含CSS的import语句，ReScript的%%raw会原样输出到编译文件，这部分无需修改，只需保证Webpack入口./src/Index.bs.js是ReScript编译后的正确文件。

4. 重新构建启动服务
   运行npm run build重新编译ReScript和Webpack，再执行npm run server启动开发服务器，检查样式是否生效。

内容的提问来源于stack exchange，提问作者Knows Not Much