如何将自定义 bootstrap 主题放入 Angular 12？

Question

我有一个 angular 网站，其中 bootstrap 来自 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.

非常感谢您的帮助！

Answer 1

您正在导入 Bootstrap 一次，而其他 SCSS 没有做任何事情。

在您的 src 根目录中创建一个新文件（我喜欢创建一个名为 'styles' 的新文件夹以保持整洁，所以将其他 scss 文件也放在那里）：

src/styles/styles.scss

在此新文件中，按相同顺序添加导入：

@import "_variables.scss" (the first one takes precedance)
@import '~bootstrap/scss/bootstrap';
@import "_bootswatch.scss"

你的 angular.json 应该只有你的 scss 因为所有的都被编译：

"styles": [
    "src/styles.scss",
],

就是这样。另请注意，我喜欢创建一个新文件 _bootstrap.scss，而不是从 node_modules 导入文件，因此我可以从 Bootstrap 中删除我不关心的组件，例如轮播。

如何将自定义 bootstrap 主题放入 Angular 12？

How to put custom bootstrap theme in Angular 12?

angular-ui-bootstrap

angular