一个星期以来一直有这个问题并且无法找到解决方案，但我想出了一些事情来缩小问题的范围。我正在尝试在我的 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 . 最佳答案
今天遇到了同样的问题。重新检查所有组件样式。检查您是否将动态值传递给尾风的自定义类名，例如 w-[${width}px] .并将其更改为内联 react 样式，如 style={{ width }} .它会在构建期间导致错误。
关于javascript - 为什么我会收到此错误(Tailwind + Next.js)？ HookwebpackError, CssSyntaxError，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70466186/