在React中使用SCSS时遭遇‘Module not found’错误求助

以下是几个排查和解决的方向：

1. 确认文件位置与路径 #

• 检查logo.scss是否和Logo.js位于同一个目录：/Users/antonov/Project/HorlogeV2/src/components/Logo/
• 导入时添加相对路径./，避免Webpack误去node_modules中查找：

  import './logo.scss';
  

2. 检查文件名大小写 #

Webpack对文件名大小写敏感，确保你的SCSS文件名是logo.scss（和导入语句完全一致），而不是Logo.scss或Logo.SCSS。

3. 配置Webpack处理SCSS文件 #

如果项目还没配置SCSS解析，需要安装依赖并修改Webpack配置：

• 安装必要loader：

  npm install sass-loader sass css-loader style-loader --save-dev
  

• 在webpack.config.js中添加SCSS处理规则：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            "style-loader",
            "css-loader",
            "sass-loader"
          ]
        }
      ]
    }
  };
  

4. 额外：修复图片导入路径（可选） #

React中直接使用相对路径加载图片可能导致打包后路径错误，建议改为导入方式：

import './logo.scss';
import soldierBoi from './Images/Soldierboi.jpeg';

class Logo extends Component {
  render() {
    return (
      <div className="logo">
        <img alt="Logo failed 2 load" src={soldierBoi}/>
      </div>
    )
  }
}

export default Logo;

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