React+Typescript+Vite项目生产构建Sass报错求助

错误信息 #

执行npm run build时出现以下错误：

error during build:
Error: expected "{".
  ╷
2 │     for (var i = 0; i < m.length; i++) {
  │                   ^
  ╵
  stdin 2:19  root stylesheet
    at Object.wrapException (/home/aditya/Documents/Programs/Web_Dev/React/TaskMate - Frontend/node_modules/sass/sass.dart.js:1237:17)
    at SpanScanner.error$3$length$position (/home/aditya/Documents/Programs/Web_Dev/React/TaskMate - Frontend/node_modules/sass/sass.dart.js:69418:15)
    at SpanScanner.expectChar$2$name (/home/aditya/Documents/Programs/Web_Dev/React/TaskMate - Frontend/node_modules/sass/sass.dart.js:9500:12)
    at SpanScanner.expectChar$1 (/home/aditya/Documents/Programs/Web_Dev/React/TaskMate - Frontend/node_modules/sass/sass.dart.js:93498:10)
    at ScssParser0.children$1 (/home/aditya/Documents/Programs/Web_Dev/React/TaskMate - Frontend/node_modules/sass/sass.dart.js:99936:39)
    at ScssParser0._stylesheet0$_withChildren$1$3 (/home/aditya/Documents/Programs/Web_Dev/React/TaskMate - Frontend/node_modules/sass/sass.dart.js:99941:19)
    at ScssParser0._stylesheet0$_styleRule$2 (/home/aditya/Documents/Programs/Web_Dev/React/TaskMate - Frontend/node_modules/sass/sass.dart.js:96998:20)
    at ScssParser0._stylesheet0$_declarationOrStyleRule$0 (/home/aditya/Documents/Programs/Web_Dev/React/TaskMate - Frontend/node_modules/sass/sass.dart.js:96861:87)
    at ScssParser0._stylesheet0$_statement$1$root (/home/aditya/Documents/Programs/Web_Dev/React/TaskMate - Frontend/node_modules/sass/sass.dart.js:96749:166)

项目在开发环境运行正常，但错误指向node_modules内文件，需获取构建后的HTML、JS和CSS文件用于后端部署。

我的Sass代码（使用.sass后缀，缩进式语法） #

@tailwind base
@tailwind components
@tailwind utilities

$default-transition: all ease-in-out 250ms

#App 
    overflow-x: hidden

h1 
    @apply text-6xl font-extrabold

h2
    @apply text-5xl font-bold

package.json配置 #

{
  "name": "taskmate",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/core": "^11.0.0",
    "@emotion/styled": "^11.10.8",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "jquery": "^3.6.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vite-plugin-ruby": "^3.2.2"
  },
  "devDependencies": {
    "@rollup/plugin-inject": "^5.0.3",
    "@types/jquery": "^3.5.16",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react": "^4.0.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "postcss": "^8.4.23",
    "react-router-dom": "^6.10.0",
    "sass": "^1.62.1",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.0.2",
    "vite": "^4.3.2"
  }
}

已尝试的无效方法 #

• 删除node_modules后重新执行npm i
• 移除package.json中的sass包并重装依赖

解决方案 #

1. 移除冲突插件vite-plugin-ruby #

错误提示中JS代码被Sass解析器处理，大概率是vite-plugin-ruby导致的（该插件为Ruby on Rails项目设计，和纯React Vite项目不兼容）。操作步骤：

• 卸载插件：npm uninstall vite-plugin-ruby
• 打开vite.config.ts，删除所有和vite-plugin-ruby相关的配置代码
• 重新执行npm run build

2. 明确指定Sass语法类型 #

在vite.config.ts中配置Sass使用缩进式语法，避免解析混淆：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      sass: {
        syntax: 'indented' // 明确使用缩进式Sass语法
      }
    }
  }
})

3. 临时获取构建产物的替代方法 #

如果上述方法暂时无法解决，可尝试以下临时方案：

• 运行npm run dev启动开发服务
• 打开页面后，通过浏览器开发者工具：
  1. 保存页面的HTML源码（注意替换资源路径为相对路径）
  2. 在Sources面板中找到编译后的JS、CSS文件，下载保存
• 整理好这些文件后即可用于后端部署

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