升级至create-react-app 4.0.1后无法解析SCSS文件求助

我之前升级CRA到4.x版本时也踩过几乎一模一样的坑，折腾了好一阵才解决，结合你的情况，给你几个亲测有效的解决方案：

1. 修正SCSS文件的导入语法 #

你在master.scss里用的@import url('./animations.scss');是原生CSS的导入写法，但对于SCSS这类预编译文件，CRA 4.x的sass-loader解析规则变得更严格了——用url()会让loader把它当成普通静态资源处理，而不是预编译的SCSS文件，这直接导致了路径解析失败。

把所有SCSS文件的导入改成SCSS原生语法（去掉url()）：

@import './all.css'; // CSS文件可以保留原写法或者也去掉url()
@import './animations.scss';
@import './big-flag.scss';
@import './coat.scss';
@import './flags16-both.scss';
@import './flags16-extra.scss';
@import './flags32-both.scss';
@import './flags32-extra.scss';
@import './locations.scss';
@import './index.scss';

这个操作成本最低，大概率能直接解决你的问题。

2. 替换node-sass为dart-sass（推荐） #

node-sass已经停止维护了，CRA 4.x对它的兼容性也不如dart-sass（也就是npm上的sass包）友好。你当前用的node-sass 4.14.1和CRA 4.0.1配套的sass-loader版本存在兼容性隐患，直接替换成dart-sass能避免很多奇怪的问题：

# 先卸载node-sass
npm uninstall node-sass
# 安装dart-sass
npm install sass --save-dev

替换完成后重启开发服务器，大部分SCSS相关的编译问题都会消失。

3. 检查路径大小写与文件存在性 #

Windows系统默认不区分文件名大小写，但CRA的资源解析器是区分的。你可以确认一下src/assert/css目录下确实存在animations.scss，并且文件名的大小写和你导入时完全一致（比如有没有写成Animations.scss或者animations.SCSS）。

4. 清除缓存后重新编译 #

有时候缓存会导致离谱的解析错误，你可以试试：

# 删除CRA的缓存目录
rm -rf node_modules/.cache
# 重启开发服务器
npm start

如果还是不行，就彻底重装依赖：

rm -rf node_modules package-lock.json
npm install
npm start

我当时是先改了导入语法，再切换到dart-sass就彻底解决了问题，你可以先从第一个方案开始试，见效最快。

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