React启动时.env文件报stylelint(csssyntaxerror)未知单词错误如何解决

这个报错和.env文件改动没有关联，本质是Stylelint做样式校验时，遇到了无法按当前配置解析的语法，按以下步骤排查即可：

• 第一步先定位具体出错文件
  不要只看终端最外层的报错提示，往上滚动日志找报错栈里标注的具体文件路径和行号，90%的场景都是对应文件里的样式写法有低级错误：比如多打了无意义的乱码字符、漏写分号/闭合括号/属性值引号、把CSS关键字拼错。
• 第二步核对Stylelint配置和项目使用的样式语法是否匹配
  • 如果项目用了SCSS/LESS等CSS预处理器，必须给Stylelint装对应语法解析包，比如用SCSS要安装stylelint-config-standard-scss，在.stylelintrc配置文件里把对应规则集加到extends字段里，不要用原生CSS解析器去读预处理器文件。
  • 如果项目用了CSS-in-JS方案（styled-components/emotion等），要把Stylelint的customSyntax字段配置为@stylelint/postcss-css-in-js，默认解析器无法识别JS/TS文件里嵌的样式代码。
• 第三步排查缓存和依赖异常
  如果确认样式写法和配置都没问题，先删了node_modules/.cache目录再重启项目，很多时候是缓存脏了导致的解析误判。如果还是报错，检查最近有没有升级Stylelint或者相关插件，版本不兼容也会触发这类解析错误，可以删掉node_modules和对应锁文件后重新执行依赖安装命令。
• 紧急场景临时绕过方案
  如果需要先把项目跑起来再慢慢定位问题，react-scripts脚手架可以在环境变量里加DISABLE_ESLINT_PLUGIN=true临时关闭构建时的lint校验，非脚手架项目可以暂时把webpack配置里的Stylelint插件注释掉，等定位到具体错误点再改回来。

排查全程不用在.env配置上花时间，这类Stylelint语法解析报错和环境变量没有直接关系。

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