Create React App中Sass文件相互导入失败求助

开发者阿泽

2026-5-13

解决SCSS导入错误的常见方案

Hey, let's work through this SCSS import issue step by step—here are the most common fixes that should get you sorted:

Fix 1: 修复hello.scss中的语法错误
你当前的hello.scss代码缺少了必备的大括号，这是SCSS/CSS语法的硬性要求。请修改为：
```
.hello {
  color: red;
}
```
缺失大括号会直接导致sass-loader编译失败，进而引发导入错误。
Fix 2: 简化导入路径写法
虽然文件在同一目录，你可以尝试省略.scss后缀来导入：
```
@import 'hello';
```
Sass加载器通常会自动识别.scss、.sass这类常见后缀，这样能避免一些路径解析的小问题。另外还要注意文件名的大小写（Linux/macOS系统区分大小写，如果实际文件是Hello.scss，写@import 'hello'会失效）。

Fix 3: 检查Webpack加载器配置
如果你用Webpack构建项目，务必确认加载器链的顺序是否正确（加载器是从右到左执行的）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader', // 将样式注入DOM
          'css-loader',   // 解析CSS中的@import和url()
          'sass-loader'   // 编译SCSS为CSS
        ]
      }
    ]
  }
};

缺少任一加载器或顺序错误，都会导致导入失败。

Fix 4: 解决依赖版本冲突
node-sass已经被官方弃用，它和sass-loader、Node.js版本之间很容易出现不兼容问题。建议切换到官方推荐的sass（Dart Sass）：
1. 卸载旧依赖：
```
npm uninstall node-sass sass-loader
```
2. 安装兼容的新版本：
```
npm install sass sass-loader --save-dev
```
要是你必须保留node-sass，请务必安装和你的Node.js版本匹配的版本（可以查看node-sass的版本兼容表确认）。