React引入ThreeButton.scss报错：Module not found: Can't resolve './ThreeButton.scss'

先从最核心的几个方向排查问题：

1. 核对文件路径与拼写 #

• 确认ThreeButton.scss和你的.tsx文件是否在同一目录下。如果不在同级，要调整引入路径：
  • 若SCSS在子文件夹styles里，改成import './styles/ThreeButton.scss'
  • 若在上一级目录，用import '../ThreeButton.scss'
• 严格检查文件名大小写：系统区分大小写，比如实际文件是threebutton.scss，但你写的是ThreeButton.scss就会报错，必须完全匹配。

2. 安装SCSS支持依赖 #

React项目默认不支持SCSS编译，需要先安装sass包（废弃的node-sass不要用）：

npm install sass --save-dev
# 或用yarn
yarn add sass --dev

安装完成后重启开发服务器，依赖生效需要刷新服务。

3. 自定义Webpack配置检查（非Create React App项目） #

如果是自己配置Webpack的项目，要确保配置了SCSS loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader", // 生成style节点注入页面
          "css-loader", // 编译CSS为CommonJS
          "sass-loader", // 编译Sass为CSS
        ],
      },
    ],
  },
};

同时要安装对应loader依赖：

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

另外提个小细节：你的组件名写的是ThreeButtton（多了一个t），虽然和当前报错无关，但后续使用组件时要注意拼写一致。

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