create-react-app (CRA) 项目开启 sass sourcemap

官方不支持本地调试开启 sass 的 sourcemap（今年 3 月的某个版本曾经支持过），笔者也没有找到 react-app-rewired 支持的方法，所以修改了 config-overrides.js 使用了 craco。

这个问题从去年开始就有国外开发者提 issue 了，中间一度 CRA 发布了支持版本，但由于这个原因又回滚了该特性，目前处于本地开发是不支持 sourcemap 的（可见官方文档）。

QQ20190718-175333.png

我们目前用的是 react-app-rewired 来新增项目的 webpack 配置，但是没有找到开启 sourcemap 的方法。所以最后还是参考了这个方法，修改了 config-overrides.js，改用 craco 轻松实现。

注：eject 方案不推荐使用，CRA 的目的即是开箱即用。eject 之后就是走 webpack 配置工程师的道路，且这是个不可回滚的操作。

参考资料

1. Create React App 使用
2. 如何扩展 Create React App 的 Webpack 配置
3. 打破砂锅问到底：详解Webpack中的sourcemap
4. devtool