为什么我会收到此错误（Tailwind + Next.js）？HookwebpackError、CssSyntaxError

Question

这个问题已经存在一周了，一直无法找到解决方案，但我想出了一些方法来缩小问题范围。我尝试在 Next.js 应用程序中运行纱线构建，但它失败并出现错误，我将在下面发布该错误。

该程序应用程序编译良好，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:

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.

next.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']
    }
}

_app.js:

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

postcss.config.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

package.json

console.log("Testing Postcss")

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

笔记：

• 来自console.log()编辑postcss.config.js：已打印
• C:\Users\project\static\css\b0067dc6dc66c8dc当我按住 alt+单击该文件时，似乎无法解析该文件。
• 当从中"./components/**/*.{js,ts,jsx,tsx}",删除时，该应用程序将正常构建。jsx 不会收到任何 TW 样式，但 jsx 会按预期工作。content: []tailwind.config.js/components//pages/
• 删除plugins: []& 并variants: {}不能修复它。
• @tailwind base; @tailwind components; @tailwind utilities;均进口于globals.css.

Answer 1

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