我有一個角度網站，帶有來自 npm 的引導程式和 @ng-bootstrap/ng-bootstrap。我真的不喜歡默認主題。所以我在 bootswatch 上找到了一些主題。我下載了“_variables.scss”和“_bootswatch.scss”。
在我的 style.css 中，我有以下代碼作業：
@import '~bootstrap/scss/bootstrap';
在我的 angular.json 中，我放置了以下樣式配置：
...
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss",
"src/_variables.scss",
"src/_bootswatch.scss"
],
..
.
然后我收到以下錯誤：
./src/_bootswatch.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/_bootswatch.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
?
15 │ font-family: $headings-font-family;
│ ^^^^^^^^^^^^^^^^^^^^^
?
src/_bootswatch.scss 15:16 root stylesheet
./src/_bootswatch.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
我真的很感激幫助！
uj5u.com熱心網友回復：
您匯入 Bootstrap 一次，而其他 SCSS 沒有做任何事情。
在您的 src 根目錄中創建一個新檔案（我喜歡創建一個名為 'styles' 的新檔案夾以保持其整潔，因此也將其他 scss 檔案放在那里）：
src/styles/styles.scss
在這個新檔案中，添加：
@import "_variables.scss" (第一個優先) @import "_bootswatch.scss" @import "../node_modules/boostrap/scss/boostrap.scss"
您的 angular.json 應該只有您的 scss，因為所有內容都已編譯：
"styles": [
"src/styles.scss",
],
而已。另請注意，我喜歡創建一個新檔案“_bootstrap.scss”，而不是從 node_modules 匯入該檔案，因此我可以從 Bootstrap 中洗掉我不關心的組件，例如輪播。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/455178.html