Мобильная версияЭта проблема возникла уже неделю, и я не смог найти решения, но я нашел кое-что, чтобы сузить проблему. Я пытаюсь запустить сборку пряжи в своем приложении Next.js, но у меня возникает ошибка, о которой я сообщу ниже.
Приложение программы отлично компилируется с yarn dev, и все стили работают. Я использовал стандартную настройку из документации TW.
Могут ли неправильные названия стилей стать причиной ошибок при построении? Например, className="BadStyleName h-10 w-10"
Ошибка:
info — Создание оптимизированной рабочей сборки Не удалось скомпилировать. HookWebpackError: C:\Users\project\static\css\b0067dc6dc66c8dc.css
12: неизвестное слово в makeWebpackError (C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:47168:9) в C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js
12 при eval (оценка при создании (C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:141512:10), :34:1) в процессеTicksAndRejections (узел: внутренний/процесс/task_queues: 96:5) -- внутренняя ошибка -- CssSyntaxError: C:\Users\project\static\css\b0067dc6dc66c8dc.css12: неизвестное слово в Input.error (C:\Users\project\node_modules\next\node_modules\postcss\lib\input.js:123:16) в ScssParser.unknownWord (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:518:22) в ScssParser.other (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:149:12) в ScssParser.parse (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:59:16) в scssParse (C:\Users\project\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:335) в новом LazyResult (C:\Users\project\node_modules\next\node_modules\postcss\lib\lazy-result.js:122:16) в Processor.process (C:\Users\project\node_modules\next\node_modules\postcss\lib\processor.js:33:12) в CssMinimizerPlugin.optimizeAsset (C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:43:12) в C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:77:55 в процессеTicksAndRejections (узел: внутренний/процесс/task_queues: 96:5) вызвано плагинами в Compilation.hooks.processAssets CssSyntaxError: C:\Users\project\static\css\b0067dc6dc66c8dc.css12: неизвестное слово в Input.error (C:\Users\project\node_modules\next\node_modules\postcss\lib\input.js:123:16) в ScssParser.unknownWord (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:518:22) в ScssParser.other (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:149:12) в ScssParser.parse (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:59:16) в scssParse (C:\Users\project\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:335) в новом LazyResult (C:\Users\project\node_modules\next\node_modules\postcss\lib\lazy-result.js:122:16) в Processor.process (C:\Users\project\node_modules\next\node_modules\postcss\lib\processor.js:33:12) в CssMinimizerPlugin.optimizeAsset (C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:43:12) в C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:77:55 в процессеTicksAndRejections (узел: внутренний/процесс/task_queues: 96:5) > Сборка не удалась из-за ошибок веб-пакета ошибка Команда не выполнена с кодом выхода 1. info Посетите https://yarnpkg.com/en/docs/cli/run для получения документации по этой команде. tailwind.config.js:module.exports = { содержание: [ "./pages/**/*.{js,ts,jsx,tsx}", "./comComponents/**/*.{js,ts,jsx,tsx}", ], darkMode: true, // или «медиа», или «класс» тема: { продлевать: { гибкий: { основа: '0 0 100%', }, цвета: { первичный: { монетный двор: "#18BCFF" }, шифер: { 50: "#f8fafc", 100: "#f1f5f9", 200: "#e5e5e5", 300: "#d4d4d4", 400: "#а3а3а3", 500: "#737373", 600: "#525252", 700: "#404040", 800: "#262626", 900: "#171717" } }, } }, плагины: [ требуется('ромашка'), require('@tailwindcss/line-clamp'), require('Попутный ветер-полоса прокрутки'), ], варианты: { полоса прокрутки: ['закругленная'] } } next.config.js:
module.exports = { реакцияСтриктмоде: правда, изображений: { домены: ['firebasestorage.googleapis.com'], }, } _app.js:
import "../styles/globals.css" импортировать «tailwindcss/tailwind.css» импортировать макет из "../компоненты/макет/макет" импортировать "../firebase/clientApp" импортировать { SessionProvider } из "next-auth/react" импортировать MintBG из «../components/layout/mintBG» функция MyApp({Компонент, pageProps }) { возвращаться ( ) } экспортировать MyApp по умолчанию postcss.config.js
console.log("Тестирование Postcss") модуль.экспорт = { плагины: { попутный ветерксс: {}, автопрефиксер: {}, }, } package.json
{ "имя": "проект", «частное»: правда, "скрипты": { "dev": "следующий разработчик", "build": "следующая сборка", "start": "следующий старт", "lint": "следующий ворс" }, "зависимости": { "@headlessui/react": "^1.4.2", "@tailwindcss/line-clamp": "^0.3.0", "ромашка": "^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", "формик": "^2.2.9", "lodash": "^4.17.21", "следующий": "последний", "next-auth": "^4.0.0-beta.7", "реагировать": "17.0.2", "react-beautiful-dnd": "^13.1.0", "реакция-дом": "17.0.2", "реагировать-значки": "^4.3.1", "svg-react-loader": "^0.4.6", "ага": "^0.32.11" }, "devDependency": { "автопрефиксер": "^10.4.0", "эслинт": "8.4.1", "eslint-config-next": "12.0.7", "postcss": "^8.4.5", "реагировать-svg-loader": "^3.0.3", "Попутный ветер-полоса прокрутки": "^1.3.1", "tailwindcss": "^3.0.6" } } Примечания:
[*]Редактирование console.log() из postcss.config.js: ПЕЧАТАЕТСЯ [*]C:\Users\project\static\css\b0067dc6dc66c8dc, похоже, не преобразуется в файл, когда я нажимаю на него клавишу Alt. [*]Приложение будет работать нормально, если "./comComponents/**/*.{js,ts,jsx,tsx}", будет удален из содержимого: [] в tailwind.config.js. /comComponents/ jsx не получит никаких стилей TW, но jsx в /pages/ работает как положено. [*]удаление плагинов: [] и вариантов: { не помогает. [*]База @tailwind; компоненты @tailwind; Утилиты @tailwind; импортируются в globals.css.
