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

我想在使用Angular CLI创建的Angular(4)项目中使用Bootstrap 4和SASS.

特别是我需要：

>使用SASS而不是CSS作为全局样式和组件样式
>编译Bootstrap SASS源以及我的自定义* .scss样式
>确保我的自定义样式覆盖Bootstrap源,因此我可以在需要时覆盖Bootstrap源,而无需编辑Bootstrap源本身(可以轻松升级Bootstrap源版本)
>添加手表&每当我的* .scss文件中的任何一个(包括组件和全局样式)更改为ng服务脚本时自动重新编译

为了使用SASS设置Angular Bootstrap 4,我们只需要配置Angular CLI并安装Bootstrap 4 npm包.无需安装任何SASS编译器,因为它已经包含在内.

1)配置Angular CLI以使用SASS而不是CSS

跑：

ng set defaults.styleExt scss

这会影响你的.angular-cli.json配置文件(example).

注意：如果您从头开始,可以使用Angular CLI创建一个新项目：
ng new my-project –style = sass
这相当于正常创建一个新项目,然后运行上面提到的命令.

2)将现有的组件样式从CSS更改为SASS(如果有)

要完成此操作,您只需将样式文件从.css重命名为.scss并相应地更改@Component({…})配置：

styleUrls：[‘./ my-component.scss’]

(example).

通过这种方式,angular-cli会在您执行ng服务等命令时自动查看和重新编译这些文件.

3)添加Bootstrap 4

通过npm安装Bootstrap 4：

npm install bootstrap –save

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

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

(example).

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

4)添加自定义(全局)SASS文件

任何其他应该全局影响项目的SASS样式(与单个Component样式不同)可以添加到app / assets / scss下,然后在.angular-cli.json样式数组中引用.

我的建议是引用一个main.scss文件,其中包含所有自定义SASS样式：例如,自定义变量的_variables.scss,全局规则的_global.scss文件等.(example).

因此,在.angular-cli.json中,您将只引用一个自定义main.scss文件：

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

其中包含所有自定义全局* SASS代码：

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

*请注意,您不得在此处包含单个组件的* .scss样式文件.

5)包括Bootstrap JavaScript和jQuery的替代品.

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

两个例子：

> ngx-bootstrap
> ng-bootstrap

这两个项目之间的区别在这里讨论：What is the difference between “ng-bootstrap” and “ngx-bootstrap”?

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

猜你在找的Angularjs相关文章