10-1前端项目初始化一课，加入bootstrap样式报错

Question

添加了样式会报错，项目可以启动起来，但是网址请求的时候，就会报错。请教可能哪里出现问题呢。报错内容如下:

src\styles\basic.scss 12:9 @import
PS D:\nestjs\nestjs_brain_front> pnpm dev

nestjs_brain_front@0.0.0 dev D:\nestjs\nestjs_brain_front
vite

VITE v4.4.3 ready in 354 ms

➜ Local: http://127.0.0.1:4000/
➜ Network: use --host to expose
➜ press h to show help
15:18:49 [vite] Internal server error: [sass] Undefined variable.
╷
55 │ “primary”: $primary-text-emphasis-dark,
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules.pnpm\bootstrap@5.3.0_@popperjs+core@2.11.8\node_modules\bootstrap\scss_maps.scss 55:16 @import
src\styles\basic.scss 12:9 @import
src\styles\variables.scss 12:9 @import
src\styles\root.scss 1:9 root stylesheet
Plugin: vite:css
File: D:\nestjs\nestjs_brain_front\node_modules.pnpm\bootstrap@5.3.0_@popperjs+core@2.11.8\node_modules\bootstrap\scss_maps.scss:55:16
Error: Undefined variable.
╷
55 │ “primary”: KaTeX parse error: Expected 'EOF', got '│' at position 34: …sis-dark, │̲ …protected (D:\nestjs\nestjs_brain_front\node_modules\sass\sass.dart.js:3907:15)
at _wrapJsFunctionForAsync_closure.callKaTeX parse error: Expected 'EOF', got '\nestjs' at position 6: 2 (D:\̲n̲e̲s̲t̲j̲s̲\nestjs_brain_f…body$_EvaluateVisitor0 (D:\nestjs\nestjs_brain_front\node_modules\sass\sass.dart.js:73783:16)
at EvaluateVisitor2.visitVariableExpression$1 (D:\nestjs\nestjs_brain_front\node_modules\sass\sass.dart.js:73757:19)
at VariableExpression0.accept$1$1 (D:\nestjs\nestjs_brain_front\node_modules\sass\sass.dart.js:102029:22)
at VariableExpression0.accept$1 (D:\nestjs\nestjs_brain_front\node_modules\sass\sass.dart.js:102032:19)
at D:\nestjs\nestjs_brain_front\node_modules\sass\sass.dart.js:74323:47
[sass] Undefined variable.
╷
55 │ “primary”: $primary-text-emphasis-dark,
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules.pnpm\bootstrap@5.3.0@popperjs+core@2.11.8\node_modules\bootstrap\scss_maps.scss 55:16 @import
src\styles\basic.scss 12:9 @import
src\styles\variables.scss 12:9 @import
src\styles\root.scss 1:9 root stylesheet

Answer 1

ajax0769 2023-12-18 18:39:23

在styles/basic.scss文件内添加

@import "~bootstrap/scss/variables-dark";

Answer 2

Brian 2023-07-16 12:32:29

 “primary”: $primary-text-emphasis-dark,

这里有一个sass的变量，没有找到定义的位置！！

vite找了很多位置

node_modules.pnpm\bootstrap@5.3.0_@popperjs+core@2.11.8\node_modules\bootstrap\scss_maps.scss 55:16 @import
src\styles\basic.scss 12:9 @import
src\styles\variables.scss 12:9 @import
src\styles\root.scss 1:9 root stylesheet
Plugin: vite:css

你看看，是不是写漏掉了？

• 提问者 慕数据8524399 #1

  根据您的回答，我还是找不到问题？我应该检查哪里？

• 提问者 慕数据8524399 #2

  我弄好了，我把课件里的一些SCSS文件替换了我报错的SCSS文件

• Brian 回复 提问者 慕数据8524399 #3

  好的，加油~~

点开查看后面1条评论