我的项目结构如下:

入口文件是index.jsx，组件Button.jsx使用了样式button.module.css

.btn {background-color: #4CAF50;border: none;color: white; padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;
}.btn:hover {background-color: #3e8e41;
}   .btn:active {background-color: #3e8e41;box-shadow: 0 5px #666;transform: translateY(4px);
}

我在webpack.config.js配置如下：

const path = require('path');module.exports = {entry: './src/index.jsx', // 入口文件output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),publicPath: '/'},module: {rules: [{test: /\.jsx?$/,exclude: /node_modules/,use: 'babel-loader',},{test: /\.css$/, // 匹配css文件，或者修改为/\.moudle.css$/，只匹配后缀.module.cssuse: ['style-loader', // 将 JS 字符串生成为 style 节点{loader: 'css-loader',options: {modules: true // 启用 CSS 模块}}]}]},resolve: {extensions: ['.js', '.jsx'],},devServer: {static: {directory: path.join(__dirname, 'dist'), // 将 contentBase 替换为 static},compress:true,open: true,port: 5173,hot: true,},mode: 'development' // 开发模式
};

Button,jsx:

import React from'react';
import styles from './styles/button.module.css'const Button = ({ text, onClick }) => {return (<button className={styles.btn} onClick={onClick}>{text}</button>);    
};export default Button;

但是运行时却报错:Uncaught TypeError: Cannot read properties of undefined (reading 'btn')

我根据网络上的解决方法，

清除缓存，重新安装

npm cache clean --force
npm install style-loader@latest
npm install css-loader@latest

都无法解决。

于是认真思考：因为报错信息没有包含类似”cannot find module 'button.module.css'“，”style-loader“....，且npm命令行没有任何报错，所以可以断定css-loader和style-loader是正确安装并启动了的。

我又尝试在Button.jsx里点击了css的路径，可以正常跳转到css文件，说明路径引用也没有错误。

import styles from './styles/button.module.css'

尝试输出

console.log(styles)

结果是undefined。很奇怪，明明引用了却无法读取css类名。

试着将css的引用语句，替换为：

const styles = require('./styles/button.module.css')

搞定：