Bootstrap & angular 8. _root.scss 中的未定义变量
Bootstrap & angular 8. undefined variable in _root.scss
我今天尝试将我的项目更新到 angular 8.0.0,但我 运行 遇到了 bootstrap 的问题,我找不到解决方案。
我用的是bootstrap4.3.1
当我执行 ng serve
时,出现此错误:
ERROR in ./node_modules/bootstrap/scss/bootstrap.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--13-3!./node_modules/bootstrap/scss/bootstrap.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
@each $color, $value in $colors {
^
Undefined variable.
╷
3 │ @each $color, $value in $colors {
│ ^^^^^^^
╵
node_modules/bootstrap/scss/_root.scss 3:27 @import
stdin 11:9 root stylesheet
in ./node_modules/bootstrap/scss/_root.scss (line 3, column 27)
在我的 angular.json 中,我有这个(我只包含了与 scss 相关的部分):
"schematics": {
"@schematics/angular:component": {
"style": "sass"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.json"
],
"styles": [
"./node_modules/bootstrap/scss/bootstrap.scss",
"./node_modules/c3/c3.css",
"./node_modules/@fortawesome/fontawesome-free/css/all.css",
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"./src/styles/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
},
"scripts": [],
"es5BrowserSupport": true
},
根据我对错误的理解,这是由于全局 scss 变量不可用,在 "./node_modules/bootstrap/scss/bootstrap.scss"
中,它看起来像这样:
@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "many_other_stuff"
$colors 变量在 "variables"
中定义,因此它应该在 "root"
中可用。
知道我做错了什么吗?
请查看此 Stackblitz 并比较您的 package.json、angular.json(和其他相关文件),看看您是否错过了安装某些依赖项。这个 Stackblitz 有 angular 8.0.0 并使用 bootstrap 4.3.1
https://stackblitz.com/edit/angular-gkx8zp?file=package.json
https://stackblitz.com/edit/angular-gkx8zp?file=angular.json
您需要在 package.json 中添加这些以安装 bootstrap 并将它的 scss 版本与 angular 8.0
一起使用
"bootstrap": "4.3.1",
"jquery": "1.9.1 - 3",
"popper.js": "^1.14.7",
"node-sass": "4.7.2",
应该是scss而不是sass :
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
谢谢
我今天尝试将我的项目更新到 angular 8.0.0,但我 运行 遇到了 bootstrap 的问题,我找不到解决方案。
我用的是bootstrap4.3.1
当我执行 ng serve
时,出现此错误:
ERROR in ./node_modules/bootstrap/scss/bootstrap.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--13-3!./node_modules/bootstrap/scss/bootstrap.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
@each $color, $value in $colors {
^
Undefined variable.
╷
3 │ @each $color, $value in $colors {
│ ^^^^^^^
╵
node_modules/bootstrap/scss/_root.scss 3:27 @import
stdin 11:9 root stylesheet
in ./node_modules/bootstrap/scss/_root.scss (line 3, column 27)
在我的 angular.json 中,我有这个(我只包含了与 scss 相关的部分):
"schematics": {
"@schematics/angular:component": {
"style": "sass"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.json"
],
"styles": [
"./node_modules/bootstrap/scss/bootstrap.scss",
"./node_modules/c3/c3.css",
"./node_modules/@fortawesome/fontawesome-free/css/all.css",
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"./src/styles/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
},
"scripts": [],
"es5BrowserSupport": true
},
根据我对错误的理解,这是由于全局 scss 变量不可用,在 "./node_modules/bootstrap/scss/bootstrap.scss"
中,它看起来像这样:
@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "many_other_stuff"
$colors 变量在 "variables"
中定义,因此它应该在 "root"
中可用。
知道我做错了什么吗?
请查看此 Stackblitz 并比较您的 package.json、angular.json(和其他相关文件),看看您是否错过了安装某些依赖项。这个 Stackblitz 有 angular 8.0.0 并使用 bootstrap 4.3.1
https://stackblitz.com/edit/angular-gkx8zp?file=package.json https://stackblitz.com/edit/angular-gkx8zp?file=angular.json
您需要在 package.json 中添加这些以安装 bootstrap 并将它的 scss 版本与 angular 8.0
一起使用"bootstrap": "4.3.1",
"jquery": "1.9.1 - 3",
"popper.js": "^1.14.7",
"node-sass": "4.7.2",
应该是scss而不是sass :
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
谢谢