Синтаксическая ошибка React Vite PostCSS при установке боковой панели Shadcn

Синтаксическая ошибка React Vite PostCSS при установке боковой панели Shadcn ⇐ CSS

1 сообщение • Страница 1 из 1

Anonymous

Синтаксическая ошибка React Vite PostCSS при установке боковой панели Shadcn

Цитата

Сообщение Anonymous » 18 ноя 2024, 00:23

У меня есть проект Vite+React+Typescript, в котором я пытался следовать инструкциям по установке боковой панели.
Он автоматически добавил некоторые стили в мой index.css файл. Теперь содержимое выглядит примерно так:

Код: Выделить всё

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

body {
font-family: 'Nunito', sans-serif;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}

* {
@apply border-border;
}

body {
@apply bg-background text-foreground;
}
}

.firebase-emulator-warning {
@apply hidden;
}

Проблема в том, что когда я запускаю Vite в режиме разработки, появляется сообщение об ошибке:

Код: Выделить всё

11:33:52 PM [vite] Internal server error: [postcss] Unexpected token, expected ","  (9:31)
Plugin: vite:css
File: /src/index.css:undefined:NaN
9  |  @tailwind utilities;
10 |
11 |  @layer base {
|   ^
12 |    :root {
13 |      --background:  0 0% 100%;
at unexpected (/node_modules/sucrase/dist/parser/traverser/util.js:99:15)
at expect (/node_modules/sucrase/dist/parser/traverser/util.js:86:5)
at parseObj (/node_modules/sucrase/dist/parser/traverser/expression.js:759:20)
at parseExprAtom (/node_modules/sucrase/dist/parser/traverser/expression.js:553:7)
at parseExprSubscripts (/node_modules/sucrase/dist/parser/traverser/expression.js:276:20)
at parseMaybeUnary (/node_modules/sucrase/dist/parser/traverser/expression.js:257:20)
at parseExprOps (/node_modules/sucrase/dist/parser/traverser/expression.js:185:20)
at parseMaybeConditional (/node_modules/sucrase/dist/parser/traverser/expression.js:157:20)
at baseParseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:142:20)
at tsParseMaybeAssignWithoutJSX (/node_modules/sucrase/dist/parser/plugins/typescript.js:1580:45)
at tsParseMaybeAssign (/node_modules/sucrase/dist/parser/plugins/typescript.js:1548:12)
at parseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:121:43)
at parseObjectProperty (/node_modules/sucrase/dist/parser/traverser/expression.js:851:7)
at parseObjPropValue (/node_modules/sucrase/dist/parser/traverser/expression.js:892:5)
at parseObj (/node_modules/sucrase/dist/parser/traverser/expression.js:808:5)
at parseExprAtom (/node_modules/sucrase/dist/parser/traverser/expression.js:553:7)
at parseExprSubscripts (/node_modules/sucrase/dist/parser/traverser/expression.js:276:20)
at parseMaybeUnary (/node_modules/sucrase/dist/parser/traverser/expression.js:257:20)
at parseExprOps (/node_modules/sucrase/dist/parser/traverser/expression.js:185:20)
at parseMaybeConditional (/node_modules/sucrase/dist/parser/traverser/expression.js:157:20)
at baseParseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:142:20)
at tsParseMaybeAssignWithoutJSX (/node_modules/sucrase/dist/parser/plugins/typescript.js:1580:45)
at tsParseMaybeAssign (/node_modules/sucrase/dist/parser/plugins/typescript.js:1548:12)
at parseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:121:43)
at parseObjectProperty (/node_modules/sucrase/dist/parser/traverser/expression.js:851:7)
at parseObjPropValue (/node_modules/sucrase/dist/parser/traverser/expression.js:892:5)
at parseObj (/node_modules/sucrase/dist/parser/traverser/expression.js:808:5)
at parseExprAtom (/node_modules/sucrase/dist/parser/traverser/expression.js:553:7)
at parseExprSubscripts (/node_modules/sucrase/dist/parser/traverser/expression.js:276:20)
at parseMaybeUnary (/node_modules/sucrase/dist/parser/traverser/expression.js:257:20)
at parseExprOps (/node_modules/sucrase/dist/parser/traverser/expression.js:185:20)
at parseMaybeConditional (/node_modules/sucrase/dist/parser/traverser/expression.js:157:20)
at baseParseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:142:20)
at tsParseMaybeAssignWithoutJSX (/node_modules/sucrase/dist/parser/plugins/typescript.js:1580:45)
at tsParseMaybeAssign (/node_modules/sucrase/dist/parser/plugins/typescript.js:1548:12)
at parseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:121:43)
at parseObjectProperty (/node_modules/sucrase/dist/parser/traverser/expression.js:851:7)
at parseObjPropValue (/node_modules/sucrase/dist/parser/traverser/expression.js:892:5)
at parseObj (/node_modules/sucrase/dist/parser/traverser/expression.js:808:5)
at parseExprAtom (/node_modules/sucrase/dist/parser/traverser/expression.js:553:7)
at parseExprSubscripts (/node_modules/sucrase/dist/parser/traverser/expression.js:276:20)
at parseMaybeUnary (/node_modules/sucrase/dist/parser/traverser/expression.js:257:20)
at parseExprOps (/node_modules/sucrase/dist/parser/traverser/expression.js:185:20)
at parseMaybeConditional (/node_modules/sucrase/dist/parser/traverser/expression.js:157:20)
at baseParseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:142:20)
at tsParseMaybeAssignWithoutJSX (/node_modules/sucrase/dist/parser/plugins/typescript.js:1580:45)
at tsParseMaybeAssign (/node_modules/sucrase/dist/parser/plugins/typescript.js:1548:12)
at parseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:121:43)
at parseExportDefaultExpression (/node_modules/sucrase/dist/parser/traverser/statement.js:1024:34)
at parseExport (/node_modules/sucrase/dist/parser/traverser/statement.js:988:5)
11:33:52 PM [vite] Pre-transform error:  [postcss] Unexpected token, expected "," (9:31)

Там написано, что есть синтаксическая ошибка, но я не вижу в этом ничего плохого. Почему выдает эту ошибку?

Подробнее здесь: https://stackoverflow.com/questions/791 ... cn-sidebar

1731878628

Anonymous

У меня есть проект Vite+React+Typescript, в котором я пытался следовать инструкциям по установке боковой панели.
Он автоматически добавил некоторые стили в мой index.css файл.  Теперь содержимое выглядит примерно так:
[code]@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

body {
font-family: 'Nunito', sans-serif;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}

* {
@apply border-border;
}

body {
@apply bg-background text-foreground;
}
}

.firebase-emulator-warning {
@apply hidden;
}
[/code]
Проблема в том, что когда я запускаю Vite в режиме разработки, появляется сообщение об ошибке:
[code]11:33:52 PM [vite] Internal server error: [postcss] Unexpected token, expected ","  (9:31)
Plugin: vite:css
File: /src/index.css:undefined:NaN
9  |  @tailwind utilities;
10 |
11 |  @layer base {
|   ^
12 |    :root {
13 |      --background:  0 0% 100%;
at unexpected (/node_modules/sucrase/dist/parser/traverser/util.js:99:15)
at expect (/node_modules/sucrase/dist/parser/traverser/util.js:86:5)
at parseObj (/node_modules/sucrase/dist/parser/traverser/expression.js:759:20)
at parseExprAtom (/node_modules/sucrase/dist/parser/traverser/expression.js:553:7)
at parseExprSubscripts (/node_modules/sucrase/dist/parser/traverser/expression.js:276:20)
at parseMaybeUnary (/node_modules/sucrase/dist/parser/traverser/expression.js:257:20)
at parseExprOps (/node_modules/sucrase/dist/parser/traverser/expression.js:185:20)
at parseMaybeConditional (/node_modules/sucrase/dist/parser/traverser/expression.js:157:20)
at baseParseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:142:20)
at tsParseMaybeAssignWithoutJSX (/node_modules/sucrase/dist/parser/plugins/typescript.js:1580:45)
at tsParseMaybeAssign (/node_modules/sucrase/dist/parser/plugins/typescript.js:1548:12)
at parseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:121:43)
at parseObjectProperty (/node_modules/sucrase/dist/parser/traverser/expression.js:851:7)
at parseObjPropValue (/node_modules/sucrase/dist/parser/traverser/expression.js:892:5)
at parseObj (/node_modules/sucrase/dist/parser/traverser/expression.js:808:5)
at parseExprAtom (/node_modules/sucrase/dist/parser/traverser/expression.js:553:7)
at parseExprSubscripts (/node_modules/sucrase/dist/parser/traverser/expression.js:276:20)
at parseMaybeUnary (/node_modules/sucrase/dist/parser/traverser/expression.js:257:20)
at parseExprOps (/node_modules/sucrase/dist/parser/traverser/expression.js:185:20)
at parseMaybeConditional (/node_modules/sucrase/dist/parser/traverser/expression.js:157:20)
at baseParseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:142:20)
at tsParseMaybeAssignWithoutJSX (/node_modules/sucrase/dist/parser/plugins/typescript.js:1580:45)
at tsParseMaybeAssign (/node_modules/sucrase/dist/parser/plugins/typescript.js:1548:12)
at parseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:121:43)
at parseObjectProperty (/node_modules/sucrase/dist/parser/traverser/expression.js:851:7)
at parseObjPropValue (/node_modules/sucrase/dist/parser/traverser/expression.js:892:5)
at parseObj (/node_modules/sucrase/dist/parser/traverser/expression.js:808:5)
at parseExprAtom (/node_modules/sucrase/dist/parser/traverser/expression.js:553:7)
at parseExprSubscripts (/node_modules/sucrase/dist/parser/traverser/expression.js:276:20)
at parseMaybeUnary (/node_modules/sucrase/dist/parser/traverser/expression.js:257:20)
at parseExprOps (/node_modules/sucrase/dist/parser/traverser/expression.js:185:20)
at parseMaybeConditional (/node_modules/sucrase/dist/parser/traverser/expression.js:157:20)
at baseParseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:142:20)
at tsParseMaybeAssignWithoutJSX (/node_modules/sucrase/dist/parser/plugins/typescript.js:1580:45)
at tsParseMaybeAssign (/node_modules/sucrase/dist/parser/plugins/typescript.js:1548:12)
at parseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:121:43)
at parseObjectProperty (/node_modules/sucrase/dist/parser/traverser/expression.js:851:7)
at parseObjPropValue (/node_modules/sucrase/dist/parser/traverser/expression.js:892:5)
at parseObj (/node_modules/sucrase/dist/parser/traverser/expression.js:808:5)
at parseExprAtom (/node_modules/sucrase/dist/parser/traverser/expression.js:553:7)
at parseExprSubscripts (/node_modules/sucrase/dist/parser/traverser/expression.js:276:20)
at parseMaybeUnary (/node_modules/sucrase/dist/parser/traverser/expression.js:257:20)
at parseExprOps (/node_modules/sucrase/dist/parser/traverser/expression.js:185:20)
at parseMaybeConditional (/node_modules/sucrase/dist/parser/traverser/expression.js:157:20)
at baseParseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:142:20)
at tsParseMaybeAssignWithoutJSX (/node_modules/sucrase/dist/parser/plugins/typescript.js:1580:45)
at tsParseMaybeAssign (/node_modules/sucrase/dist/parser/plugins/typescript.js:1548:12)
at parseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:121:43)
at parseExportDefaultExpression (/node_modules/sucrase/dist/parser/traverser/statement.js:1024:34)
at parseExport (/node_modules/sucrase/dist/parser/traverser/statement.js:988:5)
11:33:52 PM [vite] Pre-transform error:  [postcss] Unexpected token, expected "," (9:31)
[/code]
Там написано, что есть синтаксическая ошибка, но я не вижу в этом ничего плохого. Почему выдает эту ошибку? 

Подробнее здесь: [url]https://stackoverflow.com/questions/79198186/react-vite-postcss-syntax-error-upon-installing-shadcn-sidebar[/url]

Ответить Пред. тема След. тема

1 сообщение • Страница 1 из 1

Быстрый ответ

Заголовок:

Имя пользователя:

Изменение регистра текста:

Смайлики

Ещё смайлики…

К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми. Можно прикреплять файлы, перетаскивая их в окно сообщения.

Максимально разрешённый размер вложения: 15 МБ.

Имя файла:

Комментарий к файлу:

Имя файла	Комментарий к файлу	Размер	Статус

Похожие темы

Ответы

Просмотры

Последнее сообщение

Shadcn боковой панели

Последнее сообщение Anonymous « 27 авг 2025, 16:54
Добавлено в форуме Javascript

Anonymous » 27 авг 2025, 16:54 » в форуме Javascript

Я создал боковую панель в React Router. Когда я помещаю боковую полосу на другие страницы, она работает нормально. Когда я помещаю его в корневой файл, у него есть разрыв, который я не могу понять. Я играл с CSS, и боковой панелью Root и App, но...

0 Ответы

22 Просмотры

Последнее сообщение Anonymous
27 авг 2025, 16:54
React+Vite (TSX) SHADCN+Проблемы с настройкой Tailwind (классы темы по умолчанию не распознаются)

Последнее сообщение Гость « 04 фев 2025, 13:37
Добавлено в форуме CSS

Гость » 04 фев 2025, 13:37 » в форуме CSS

Я настроил проект React+Vite Typescript и хочу добавить Shadcn для стиля.
Я следовал официальному руководству по установке ( но с тех пор Tailwind недавно был обновлен до 4.0, и эта версия, по -видимому, не совместима с Tailwind, я следил за...

0 Ответы

20 Просмотры

Последнее сообщение Гость
04 фев 2025, 13:37
Как установить React, TypeScript и TailWindcss v4 с использованием postcss

Последнее сообщение Anonymous « 11 мар 2025, 13:20
Добавлено в форуме Javascript

Anonymous » 11 мар 2025, 13:20 » в форуме Javascript

Я попытался настроить новый проект с помощью React, TypeScript и Tailwind V4, но Tailwind не применяется.
Вот моя установка:
npx create-react-app web
npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest
npx tsc...

0 Ответы

16 Просмотры

Последнее сообщение Anonymous
11 мар 2025, 13:20
Tailwind PostCSS внедряет стили встроенных вместо того, чтобы генерировать файл CSS

Последнее сообщение Anonymous « 06 фев 2025, 18:00
Добавлено в форуме CSS

Anonymous » 06 фев 2025, 18:00 » в форуме CSS

Я использую pug + tailwind + postcss для статического одностраничного HTML -файла, который генерируется с использованием базовых сценариев npm (показано ниже) css файл, на который затем ссылается в файле index.html .
вместо использования внешнего...

0 Ответы

16 Просмотры

Последнее сообщение Anonymous
06 фев 2025, 18:00
PostCSS Скомпилируйте Sass Media запросы вне порядок?

Последнее сообщение Anonymous « 02 апр 2025, 19:41
Добавлено в форуме CSS

Anonymous » 02 апр 2025, 19:41 » в форуме CSS

Я использую простую сборку WebPack с PostCSS. Если я не объявляю конкретный медиа -микшин в первом разделе SCSS страницы, но использую этот специфический медиа -миксин запросов в следующем разделе, что выходы Media Query после других точек останова...

0 Ответы

5 Просмотры

Последнее сообщение Anonymous
02 апр 2025, 19:41

Вернуться в «CSS»