Storybook+Sass+CSS Modules构建遇SassError及npm依赖问题求助

我正在使用Storybook和Sass开发设计系统，采用CSS Modules（搭配SCSS）方案，但构建Storybook时遭遇Sass编译错误：

SassError: expected "{".
node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[7].use[4]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!./node_modules/sass-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Input/Input.scss undefined
  ╷
2 │       import API from "!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                                     ^
  ╵
  src/components/Input/Input.scss 2:101  root stylesheet

已尝试的解决方案：

• 删除node_modules文件夹并重新执行npm i，但npm返回peer依赖冲突警告
• 开启legacy peer deps（执行npm config set legacy-peer-deps true）后重新安装，虽完成安装但仍收到包弃用及高风险漏洞提示
• 重装Node.js，当前使用v16.18.1，也曾试过v19.2.0
• 补充缺失的@mdx-js/react依赖，但问题仍未解决

当前package.json配置：

{
  "name": "design-system",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@mdx-js/react": "^2.2.1",
    "@storybook/preset-scss": "^1.0.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.8",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.0.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "sass": "^1.56.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s ./src",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.5.14",
    "@storybook/addon-essentials": "^6.5.14",
    "@storybook/addon-interactions": "^6.5.14",
    "@storybook/addon-links": "^6.5.14",
    "@storybook/builder-webpack5": "^6.5.14",
    "@storybook/manager-webpack5": "^6.5.14",
    "@storybook/node-logger": "^6.5.14",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.14",
    "@storybook/testing-library": "^0.0.13",
    "@typescript-eslint/eslint-plugin": "^5.46.0",
    "@typescript-eslint/parser": "^5.46.0",
    "babel-plugin-named-exports-order": "^0.0.2",
    "eslint": "^8.29.0",
    "prop-types": "^15.8.1",
    "typescript": "^4.9.4",
    "webpack": "^5.75.0"
  }
}

内容的提问来源于stack exchange，提问作者Baptiste Audugé