React.js项目中使用Scss报错，求解决方法

1. 安装/更新SCSS依赖 #

现在官方推荐使用sass替代已停止维护的node-sass，执行以下命令完成依赖安装：

# npm
npm install sass --save-dev
# 或yarn
yarn add sass -D

如果之前安装过node-sass，先卸载避免冲突：

npm uninstall node-sass
# 或yarn
yarn remove node-sass

2. 检查文件后缀与导入方式 #

确保样式文件后缀为.scss，组件中导入时对应后缀：

// 正确导入示例
import './styles/Global.scss';

3. 自定义Webpack配置检查（非create-react-app项目） #

如果是手动配置Webpack的项目，需添加SCSS编译规则：
首先安装必要loader：

npm install sass-loader css-loader style-loader --save-dev

然后在webpack.config.js中添加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

注：create-react-app创建的项目无需手动配置，内置支持SCSS

4. 排查SCSS语法错误 #

常见语法错误包括嵌套未闭合、变量未定义、混合宏使用不当等，例如：

// 错误示例：嵌套缺少闭合标签
.container {
  .title {
    color: #333;
// 缺少闭合的}

需逐行检查代码修正语法问题。

5. 清除缓存并重启项目 #

缓存可能导致异常报错，执行以下操作重置环境：

# 清除npm缓存
npm cache clean --force
# 删除依赖目录与锁定文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 重启项目
npm start

内容的提问来源于stack exchange，提问作者AnhTu-Github