如何在Angular中使用带SASS的Bootstrap 4

Question

我想在Angular CLI创建的Angular4项目中使用引导4和SASS。

我尤其需要：

• 使用SASS而不是CSS作为全局样式和组件样式
• 将Bootstrap SASS源代码与我的自定义*. scss样式一起编译
• 确保我的自定义样式覆盖了Bootstrap源，这样我就可以在需要时覆盖Bootstrap源，而无需编辑Bootstrap源本身（便于升级Bootstrap源版本）
• 添加手表

Answer 1

从版本6应该是

"styles": [
   "node_modules/bootstrap/scss/bootstrap.scss",
   "src/styles.scss",
   "src/assets/scss/main.scss"
]

如果你有一个自定义主题为我工作

仅在styles.scss中添加库

@import "./assets/scss/mytheme";
@import "~bootstrap/scss/bootstrap";

Answer 2

除了@ShinDarth的答案之外，您可能还想采用更简单的解决方案，仅导入您需要的Bootstrap模块，而不是全部导入。

因此，您将替换：

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "assets/scss/main.scss"
],

跟：

"styles": [
  "assets/scss/main.scss"
],

那么您的< code>main.scss将看起来像这样:

// import only the Bootstrap modules you need, e.g.
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/forms";
// import your own custom files, e.g.
@import "variables";
@import "global";

Answer 3

为了使用 SASS 设置角度引导 4，我们只需要配置角度 CLI 并安装引导 4 npm 软件包。无需安装任何 SASS 编译器，因为它已包含在内。

编辑:此答案已更新，可用于较新版本的Angular CLI(已通过6.1.3版测试)。我在这个答案的底部留下了旧的Angular CLI的说明，但是我强烈建议您更新您的Angular CLI版本。

编辑您的angular.json文件，并将"styleext"："scss"键值添加到projects.PROJECT_NAME.schematics.@schematics /angular：组件对象。

它应该是这样的：

{
  // ...
  "projects": {
    "PROJECT_NAME": {
      // ....
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
  // ...
}

只需使用：

ng 新的我的项目 --样式=scss

为此，您只需将样式文件从. css重命名为. scss并相应地更改@Component（{...}）配置：

styleUrls: ['./ my-component.scss']

这样，当您执行< code>ng serve等命令时，只要这些文件发生变化，angular-cli就会自动监视并重新编译它们。

通过npm安装Bootstrap 4：

< code>npm安装引导程序-保存

现在，将引导程序添加到样式数组中的角度 cli.json 配置中（在任何其他自定义 css/scss 文件之前，以便让它们覆盖引导规则：

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

这样，Bootstrap 4源代码将保持干净，并且每当新版本发布时，升级它都非常容易。

可以在app/assets/scss下添加任何其他应全局影响项目的SASS样式（与单个组件样式不同），然后在angular cli.json的样式数组中引用。

我的建议是引用一个 main.scss 文件，该文件将包含所有自定义 SASS 样式：例如，自定义变量的 _variables.scss、全局规则的 _global.scss 文件等。

因此，在角度-cli.json 中，您将仅引用一个自定义主 .scss 文件：

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "src/assets/scss/main.scss"
],

其中内部包括所有自定义全局* SASS 代码：

// main.scss 
@import "variables";
@import "global";
// import more custom files...

*请注意，这里不能包含＜code＞*。单个组件的scss样式文件。

有一些项目允许您在没有jQuery的情况下使用Bootstrap。

举两个例子：

>

ngx-bootstrap

ng引导

这里讨论了这两个项目之间的区别：“ng引导”和“ngx引导”之间的区别是什么？

警告:我将不再维护这部分答案，所以为了继续阅读它，我建议更新您的Angular CLI版本并遵循上面的说明。

运行：

＜code＞ng设置默认值。styleExt-scss

这将影响您的< code >。angular-cli.json配置文件(示例)。

注意：如果您从头开始，您可以使用Angular CLI创建一个新项目，方法是：＜code＞ng new my project--style=scss

为此，您只需将样式文件从. css重命名为. scss并相应地更改@Component（{...}）配置：

styleUrls: ['./ my-component.scss']

(举例)。

这样，当您执行< code>ng serve等命令时，只要这些文件发生变化，angular-cli就会自动监视并重新编译它们。

通过npm安装Bootstrap 4：

< code>npm安装引导程序-保存

现在将Bootstrap添加到.angular-cli.json配置在样式数组中（在任何其他自定义css/scss文件之前，以便让它们覆盖引导规则：

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

(举例)。

这样，Bootstrap 4源代码将保持干净，并且每当新版本发布时，升级它都非常容易。

任何额外的SASS样式（与单个组件样式不同）都可以添加到app/资产/scss下，然后在的样式数组中引用。angular-cli.json。

我的建议是引用一个 main.scss 文件，该文件将包含所有自定义 SASS 样式：例如，自定义变量的 _variables.scss、全局规则的 _global.scss 文件等。（示例）。

所以在你的<代码>中。angular-cli.json您将只引用一个自定义的< code>main.scss文件:

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "assets/scss/main.scss"
],

其中内部包括所有自定义全局* SASS 代码：

// main.scss 
@import "variables";
@import "global";
// import more custom files...

*请注意，这里不能包含＜code＞*。单个组件的scss样式文件。

有一些项目允许您在没有jQuery的情况下使用Bootstrap。

举两个例子：

>

ngx-bootstrap

ng引导

这里讨论了这两个项目之间的区别：“ng引导”和“ngx引导”之间的区别是什么？