javascript - 为什么我会收到此错误(Tailwind + Next.js)？ HookwebpackError, CssSyntaxError

Question

一个星期以来一直有这个问题并且无法找到解决方案，但我想出了一些事情来缩小问题的范围。我正在尝试在我的 Next.js 应用程序中运行 yarn build，但它失败并出现错误，我将在下面发布。
该程序应用程序编译良好 yarn dev并且所有样式都有效。我使用了 TW 文档中的标准设置。
错误的样式名称会导致构建错误吗？例如 className="BadStyleName h-10 w-10"错误:

info  - Creating an optimized production build  
Failed to compile.

HookWebpackError: C:\Users\project\static\css\b0067dc6dc66c8dc.css:2251:12: Unknown word
    at makeWebpackError (C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:47168:9)
    at C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:31056:12
    at eval (eval at create (C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:141512:10), <anonymous>:34:1)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
-- inner error --
CssSyntaxError: C:\Users\project\static\css\b0067dc6dc66c8dc.css:2251:12: Unknown word
    at Input.error (C:\Users\project\node_modules\next\node_modules\postcss\lib\input.js:123:16)
    at ScssParser.unknownWord (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:518:22)
    at ScssParser.other (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:149:12)
    at ScssParser.parse (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:59:16)
    at scssParse (C:\Users\project\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:335)
    at new LazyResult (C:\Users\project\node_modules\next\node_modules\postcss\lib\lazy-result.js:122:16)
    at Processor.process (C:\Users\project\node_modules\next\node_modules\postcss\lib\processor.js:33:12)
    at CssMinimizerPlugin.optimizeAsset (C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:43:12)
    at C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:77:55
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: C:\Users\project\static\css\b0067dc6dc66c8dc.css:2251:12: Unknown word
    at Input.error (C:\Users\project\node_modules\next\node_modules\postcss\lib\input.js:123:16)
    at ScssParser.unknownWord (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:518:22)
    at ScssParser.other (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:149:12)
    at ScssParser.parse (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:59:16)
    at scssParse (C:\Users\project\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:335)
    at new LazyResult (C:\Users\project\node_modules\next\node_modules\postcss\lib\lazy-result.js:122:16)
    at Processor.process (C:\Users\project\node_modules\next\node_modules\postcss\lib\processor.js:33:12)
    at CssMinimizerPlugin.optimizeAsset (C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:43:12)
    at C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:77:55
    at processTicksAndRejections (node:internal/process/task_queues:96:5)


> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

tailwind.config.js :

module.exports = {
    content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: true, // or 'media' or 'class'
  theme: {
    extend: {
            flex: {
                basis: '0 0 100%',
            },
            colors: {
                primary: { mint: "#18BCFF" },
                slate: {
                    50: "#f8fafc",
                    100: "#f1f5f9",
                    200: "#e5e5e5",
                    300: "#d4d4d4",
                    400: "#a3a3a3",
                    500: "#737373",
                    600: "#525252",
                    700: "#404040",
                    800: "#262626",
                    900: "#171717"
                }
            },
        }
        
  },

  plugins: [
        require('daisyui'),
        require('@tailwindcss/line-clamp'),
        require('tailwind-scrollbar'),
    ],
    variants: {
        scrollbar: ['rounded']
    }
}

next.config.js :

module.exports = {
  reactStrictMode: true,
    images: {
    domains: ['firebasestorage.googleapis.com'],
  },
}

_app.js :

import "../styles/globals.css"
import 'tailwindcss/tailwind.css'
import Layout from "../components/layout/layout"
import "../firebase/clientApp"
import { SessionProvider } from "next-auth/react"
import MintBG from "../components/layout/mintBG"

function MyApp({ Component, pageProps }) {
  return (
        <div className="text-white overflow-hidden">
            <AnimatedBG />
            <SessionProvider session={pageProps.session}>
                <Layout>
                    <Component {...pageProps} />
                </Layout>    
            </SessionProvider>
        </div>
    )
}

export default MyApp

postcss.config.js

console.log("Testing Postcss")

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

package.json

{
  "name": "project",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.4.2",
    "@tailwindcss/line-clamp": "^0.3.0",
    "daisyui": "^1.16.2",
    "dotenv": "^10.0.0",
    "embla-carousel-react": "^6.0.2",
    "firebase": "^9.4.1",
    "firebase-admin": "^10.0.0",
    "firebaseui": "^6.0.0",
    "formik": "^2.2.9",
    "lodash": "^4.17.21",
    "next": "latest",
    "next-auth": "^4.0.0-beta.7",
    "react": "17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1",
    "svg-react-loader": "^0.4.6",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "eslint": "8.4.1",
    "eslint-config-next": "12.0.7",
    "postcss": "^8.4.5",
    "react-svg-loader": "^3.0.3",
    "tailwind-scrollbar": "^1.3.1",
    "tailwindcss": "^3.0.6"
  }
}

笔记:

console.log()来自 postcss.config.js编辑:已打印

C:\Users\project\static\css\b0067dc6dc66c8dc当我 alt+单击它时，它似乎没有解析为文件。

应用程序将在 "./components/**/*.{js,ts,jsx,tsx}", 时正常构建已从 content: [] 中删除在 tailwind.config.js . /components/ jsx 不会接收任何 TW 样式，但 /pages/ 中的 jsx按预期工作。

删除 plugins: [] & variants: {}不修复它。

@tailwind base; @tailwind components; @tailwind utilities;被导入 globals.css .

Answer 1

今天遇到了同样的问题。重新检查所有组件样式。检查您是否将动态值传递给尾风的自定义类名，例如 w-[${width}px] .并将其更改为内联 react 样式，如 style={{ width }} .它会在构建期间导致错误。