Next.js+Tailwind+SCSS项目突发报错：TypeError: Cannot读取undefined的'5'属性

问题背景 #

使用Next.js 13.0.3、Tailwind CSS 3.2.4结合SCSS开发应用，原本运行正常，调整组件的Tailwind类后项目突然崩溃，抛出如下错误：

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[10].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[3].oneOf[10].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[3].oneOf[10].use[4]!./styles/globals.scss
TypeError: Cannot read properties of undefined (reading '5')

未修改任何配置文件，移除globals.scss顶部的@tailwind base; @tailwind components; @tailwind utilities;导入语句后项目可正常运行，但无法定位未定义变量的位置。

已尝试的操作：降级Tailwind包、清理node_modules、排查组件问题、调整Tailwind配置、重启开发服务器，问题仍未解决。

相关配置 #

tailwind.config.js #

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    extend: {
      spacing: {
        '2/3': '66.666667%',
      },
      colors: {
        'lavander-grey': '#625F63',
        'lavander-indigo': '#9893DA'

      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],

};

package.json #

{
  "engines": {
    "node": ">=14.0"
  },
  "engineStrict": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "graphql": "^16.6.0",
    "graphql-request": "^5.0.0",
    "html-react-parser": "^3.0.4",
    "moment": "^2.29.4",
    "next": "13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-multi-carousel": "^2.8.2",
    "sass": "^1.56.1",
    "swr": "^1.3.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "eslint": "^8.27.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-next": "13.0.3",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.19",
    "tailwindcss": "^3.2.4"
  }
}

postcss.config.js #

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
}

解决方案 #

1. 修正Tailwind配置的content字段（替代purge） #

Tailwind CSS 3.x官方已用content替代purge字段，虽然旧字段兼容，但可能导致解析异常。修改tailwind.config.js：

module.exports = {
  content: ['./app/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    extend: {
      spacing: {
        '2/3': '66.666667%',
      },
      colors: {
        'lavander-grey': '#625F63',
        'lavander-indigo': '#9893DA'
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

2. 排查SCSS文件语法与变量引用 #

错误本质是sass-loader解析时遇到未定义的对象，重点检查：

• globals.scss中@tailwind导入语句之后的代码，逐行排查是否有引用未定义的SCSS变量、混合宏或函数
• 暂时注释掉globals.scss中除Tailwind导入外的所有代码，逐步恢复内容，定位出错代码段

3. 修复sass版本兼容性 #

Next.js 13自带的sass-loader可能与sass@1.56.1存在冲突，尝试升级sass到最新稳定版：

npm install sass@latest

或降级到Next.js 13推荐的兼容版本（如1.55.x）

4. 清理缓存并重装依赖 #

删除构建缓存和依赖目录，重新安装：

rm -rf .next node_modules package-lock.json
npm install
npm run dev

5. 排查组件中的Tailwind类错误 #

问题出在调整组件Tailwind类之后，检查修改过的组件：

• 类名拼写是否正确（比如自定义颜色lavander-grey是否写成lavendar-grey）
• 是否使用了非法的类组合或不存在的Tailwind工具类

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