使用CRA创建的React项目中，自定义node-sass引入Sass方案是否有问题？

嘿，你的思路其实挺贴合模块化样式管理的，但这个方案确实存在几个值得注意的问题，而且还有更便捷的方式可以利用CRA的内置能力来简化流程：

你的方案存在的问题 #

• node-sass已被废弃：node-sass早在几年前就停止维护了，它依赖特定版本的Node.js，很容易出现版本兼容问题，现在官方推荐使用sass（即dart-sass）来替代它。
• 手动编译脚本繁琐冗余：CRA本身已经内置了对Sass的支持，不需要你手动编写node-sass的监听脚本——每次启动项目还要额外开终端跑这个脚本，既麻烦又容易忘。
• 编译产物的版本控制问题：手动生成的index.css如果不小心提交到版本库，会导致不必要的代码冲突，而实际上编译后的CSS属于构建产物，应该被加入.gitignore，不需要手动维护。

更便捷的优化方案 #

其实你完全可以利用CRA的内置支持，步骤非常简单：

1. 替换依赖：先卸载已安装的node-sass，安装官方推荐的sass：

   npm uninstall node-sass && npm install sass --save-dev
   

2. 直接导入Sass文件：在你的组件文件或者src/index.js中直接导入.scss文件即可，比如：

   // 在组件中导入局部样式
   import './Button.scss';
   // 或者在全局样式文件中引入
   import './index.scss';
   

   CRA会自动监听.scss文件的变化，实时编译成CSS并注入到项目中，不需要额外配置。
3. 保持模块化样式结构：你把Sass局部文件和组件JS放在同一目录的思路非常好，建议给局部样式文件加上下划线前缀（比如_Button.scss），这是Sass的规范写法，标识这是一个不会被单独编译的局部文件，你可以在主样式文件或者组件中通过@import './_Button.scss'来引入它。

关于Webpack配置的补充 #

如果你之后有特殊的样式需求（比如自定义Sass变量全局注入、配置PostCSS插件等），可以考虑用react-app-rewired来修改CRA的默认Webpack配置，而不需要直接eject（eject后无法回退到CRA的默认配置，风险较高）。但对于普通的Sass使用场景，CRA的内置支持已经完全足够了。

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