如何使用 angular-cli & ng-bootstrap 自定义 Bootstrap 4 个 SCSS 变量?
How to customise Bootstrap 4 SCSS variables using angular-cli & ng-bootstrap?
我正在使用 angular-cli 构建一个 Angular 4 应用程序。我想使用 ng-bootstrap 来包含 Bootstrap 4。但是我也想在我的构建中自定义 Bootstrap 的 scss 变量,如 http://v4-alpha.getbootstrap.com/getting-started/options/ 中所述。
我该怎么做?
Angular CLI 在其 .angular-cli.json
配置文件中提供了一个 styles
配置数组。在这里,您可以放置要作为项目的一部分编译的 scss 文件的路径。运行。
您可以将路径添加到您写入该数组的自定义 bootstrap scss 文件,它将被编译到应用程序的样式中。
Angular CLI 故事在 https://github.com/angular/angular-cli/wiki/stories-include-bootstrap 给出了答案,我将在下面总结。请注意,我还没有弄清楚它是如何与 ng-bootstrap
.
交互的
创建项目:
ng new my-app --style=scss
cd my-app
安装Bootstrap4:
npm install bootstrap@next --save
配置项目
在 src/
中创建一个空文件 _variables.scss
,这是您修改样式的地方。
在styles.scss
中添加以下内容:
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
测试项目
打开 app.component.html 并添加以下标记:
<button class="btn btn-primary">Test Button</button>
配置应用程序后,运行 ng serve
到 运行 您的应用程序处于开发模式。在您的浏览器中导航至应用程序 localhost:4200
。
验证出现 bootstrap 样式的按钮。为确保使用您的变量,请打开 _variables.scss
并添加以下内容:
$brand-primary: red;
Return浏览器看字体颜色变了
已接受的答案不再有效。如果你像我一样,你是一个新的 angular 用户,试图将 bootstrap 添加到你的项目中,并在此处关注 angular-cli wiki:https://github.com/angular/angular-cli/wiki/stories-include-bootstrap(粘贴在已接受的回答)。
这里讨论的问题:
https://github.com/twbs/bootstrap/issues/23112
简短版本:主题颜色现在位于嵌套对象中,因此 $brand-primary 等内容不再适用 - 我们现在必须更改 $theme-颜色。它有效,但我们现在必须替换整个对象,即使我们只想编辑一个变量。
$gray-100: #f8f9fa;
$gray-600: #868e96;
$gray-800: #343a40;
$red: #dc3545;
$yellow: #ffc107;
$green: #006600; // This is the only variable I wanted to change
$cyan: #17a2b8;
$theme-colors: (
primary: $green,
secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800
);
了解如何将 scss 包含在 angular 5 projet 之后(请参阅此 link:Using Sass with the Angular CLI), follow this boostrap tutorial to be more complete: https://getbootstrap.com/docs/4.0/getting-started/theming/
终于成功了。我想在我的 angular 7.2.15 应用程序中实施 bootstrap 4.3.1。
由于现有应用的默认样式模式为 css - 我使用“”将其转换为 scss(样式模式)
然后引用了互联网上的许多地方和这个页面。
以下步骤对我有用。 (感谢@Etherman 和@Dan)
- 使用 npm
安装 bootstrap
- 创建文件(例如theme.scss)用于主题颜色更改和修改,参考@Etherman 提示
- 然后正如@Dan 所说,从 src 文件夹导入修改后的文件,然后从 styles.scss 文件中的 node_modules 导入 bootstrap scss 文件。
我花了一些时间才弄明白,希望它能帮助别人,这些是我创建自己的自定义样式覆盖 ng-bootstrap
.
的步骤
- 使用
scss
样式创建一个 Angular 项目(不是 .sass!)
- 使用
ng add
安装 ng-bootstrap,如安装部分所述(不是 npm install
)。
这在我的 styles.scss
文件中添加了一行,如下所示:
/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';
- 从这里,我可以在
@import
之上添加属性,这意味着我可以根据需要更改主题。
至于找到要覆盖的变量,我首先使用 boostrap magic 的保存找到它们,但可以直接在 node_modules\bootstrap\scss\_variables.scss
中找到它们
使用 styles.scss
覆盖原色的示例:
/* You can add global styles to this file, and also import other style files */
$primaryColor: hotpink;
$theme-colors: (primary: $primaryColor);
/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';
我正在使用 angular-cli 构建一个 Angular 4 应用程序。我想使用 ng-bootstrap 来包含 Bootstrap 4。但是我也想在我的构建中自定义 Bootstrap 的 scss 变量,如 http://v4-alpha.getbootstrap.com/getting-started/options/ 中所述。
我该怎么做?
Angular CLI 在其 .angular-cli.json
配置文件中提供了一个 styles
配置数组。在这里,您可以放置要作为项目的一部分编译的 scss 文件的路径。运行。
您可以将路径添加到您写入该数组的自定义 bootstrap scss 文件,它将被编译到应用程序的样式中。
Angular CLI 故事在 https://github.com/angular/angular-cli/wiki/stories-include-bootstrap 给出了答案,我将在下面总结。请注意,我还没有弄清楚它是如何与 ng-bootstrap
.
创建项目:
ng new my-app --style=scss
cd my-app
安装Bootstrap4:
npm install bootstrap@next --save
配置项目
在 src/
中创建一个空文件 _variables.scss
,这是您修改样式的地方。
在styles.scss
中添加以下内容:
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
测试项目
打开 app.component.html 并添加以下标记:
<button class="btn btn-primary">Test Button</button>
配置应用程序后,运行 ng serve
到 运行 您的应用程序处于开发模式。在您的浏览器中导航至应用程序 localhost:4200
。
验证出现 bootstrap 样式的按钮。为确保使用您的变量,请打开 _variables.scss
并添加以下内容:
$brand-primary: red;
Return浏览器看字体颜色变了
已接受的答案不再有效。如果你像我一样,你是一个新的 angular 用户,试图将 bootstrap 添加到你的项目中,并在此处关注 angular-cli wiki:https://github.com/angular/angular-cli/wiki/stories-include-bootstrap(粘贴在已接受的回答)。
这里讨论的问题: https://github.com/twbs/bootstrap/issues/23112
简短版本:主题颜色现在位于嵌套对象中,因此 $brand-primary 等内容不再适用 - 我们现在必须更改 $theme-颜色。它有效,但我们现在必须替换整个对象,即使我们只想编辑一个变量。
$gray-100: #f8f9fa;
$gray-600: #868e96;
$gray-800: #343a40;
$red: #dc3545;
$yellow: #ffc107;
$green: #006600; // This is the only variable I wanted to change
$cyan: #17a2b8;
$theme-colors: (
primary: $green,
secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800
);
了解如何将 scss 包含在 angular 5 projet 之后(请参阅此 link:Using Sass with the Angular CLI), follow this boostrap tutorial to be more complete: https://getbootstrap.com/docs/4.0/getting-started/theming/
终于成功了。我想在我的 angular 7.2.15 应用程序中实施 bootstrap 4.3.1。
由于现有应用的默认样式模式为 css - 我使用“
然后引用了互联网上的许多地方和这个页面。 以下步骤对我有用。 (感谢@Etherman 和@Dan)
- 使用 npm 安装 bootstrap
- 创建文件(例如theme.scss)用于主题颜色更改和修改,参考@Etherman 提示
- 然后正如@Dan 所说,从 src 文件夹导入修改后的文件,然后从 styles.scss 文件中的 node_modules 导入 bootstrap scss 文件。
我花了一些时间才弄明白,希望它能帮助别人,这些是我创建自己的自定义样式覆盖 ng-bootstrap
.
- 使用
scss
样式创建一个 Angular 项目(不是 .sass!) - 使用
ng add
安装 ng-bootstrap,如安装部分所述(不是npm install
)。
这在我的 styles.scss
文件中添加了一行,如下所示:
/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';
- 从这里,我可以在
@import
之上添加属性,这意味着我可以根据需要更改主题。
至于找到要覆盖的变量,我首先使用 boostrap magic 的保存找到它们,但可以直接在 node_modules\bootstrap\scss\_variables.scss
使用 styles.scss
覆盖原色的示例:
/* You can add global styles to this file, and also import other style files */
$primaryColor: hotpink;
$theme-colors: (primary: $primaryColor);
/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';