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

编辑 : 这个答案已经更新为使用更新版本的 Angular CLI (使用版本6.1.3进行了测试)。我在这个答案的底部留下了老角 CLI 的说明，然而，我强烈建议你更新你的角度 CLI 版本。

使用新角线的说明书(第6版或以上版本)

1)设定角度接线使用 SASS 代替 CSS

- 关于现有项目:

编辑 angular.json文件并将 "styleext": "scss"键值添加到 projects.PROJECT_NAME.schematics.@schematics/angular:component对象。

它应该是这样的:

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

- 当创建一个新的项目

简单使用:

ng new my-project --style=scss

2)将现有的组件样式由 CSS 改为 SASS (如有的话)

要做到这一点，您只需要将样式文件从 .css重命名为 .scss，并相应地更改 @Component({ ... })配置:

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

这样，在执行诸如 ng serve之类的命令时，只要这些文件发生变化，angle-cli 就会自动监视并重新编译它们。

3)添加 Bootstrap 4

通过 npm 安装 Bootstrap 4:

npm install bootstrap --save

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

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

This way the Bootstrap 4 source code will stay clean and it will be very easy to upgrade it whenever a new version is released.

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

任何额外的 SASS 样式应该全面影响项目(不同于单个组件样式) ，可以在 app/assets/scss下添加，然后在 angular-cli.json的 styles数组中引用。

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

所以在你的 angular-cli.json中你只能引用一个定制的 main.scss文件:

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

其内部包括所有定制的全球 * SASS 代码:

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

* 请注意，绝对不行在这里包含单个组件的 *.scss样式文件。

5)包括 Bootstrap JavaScript 和 jQuery 的替换。

有一些项目允许您使用 Bootstrap 没有 jQuery。

两个例子:

• Ngx-bootstrap

• 鞋带

这里讨论了这两个项目之间的区别: “ ngx-bootstrap”和“ ngx-bootstrap”有什么区别？

使用旧角度线圈的指令

警告 : 我将不再保留这部分答案，所以我建议按照 更新你的角度 CLI 版本和上面的说明继续阅读。

1)设定角度接线使用 SASS 代替 CSS

跑步:

ng set defaults.styleExt scss

这将影响您的 .angular-cli.json配置文件(例子)。

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

2)将现有的组件样式由 CSS 改为 SASS (如有的话)

要做到这一点，您只需要将样式文件从 .css重命名为 .scss，并相应地更改 @Component({ ... })配置:

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

(例子).

这样，在执行诸如 ng serve之类的命令时，只要这些文件发生变化，angle-cli 就会自动监视并重新编译它们。

3)添加 Bootstrap 4

通过 npm 安装 Bootstrap 4:

npm install bootstrap --save

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

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

(例子).

这样，Bootstrap 4的源代码将保持干净，并且在新版本发布时很容易进行升级。

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

任何额外的 SASS 样式应该全面影响项目(不同于单个组件样式) ，可以在 app/assets/scss下添加，然后在 .angular-cli.json的 styles数组中引用。

我的建议是参考一个单一的 main.scss文件，其中将包括所有您的自定义 SASS 样式: 例如，_variables.scss为您的自定义变量，_global.scss文件为您的全局规则，等等。(例子).

所以在你的 .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 的替换。

有一些项目允许您使用 Bootstrap 没有 jQuery。

两个例子:

• Ngx-bootstrap

• 鞋带

这里讨论了这两个项目之间的区别: “ ngx-bootstrap”和“ ngx-bootstrap”有什么区别？

除了@ShinDarth 的 回答之外，您可能还需要一个更小的解决方案，只导入所需的 Bootstrap 模块，而不是全部。

所以你要替换:

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

配合:

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

那么你的 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";

第六版 应该是

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

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

只在 styles.scss 中添加 lib

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

如果有人遇到了我在使用 angle-cli 运行 Bootstrap 4时遇到的 Javascript 依赖性问题，那么您还需要让 angle-cli 编译器知道您已经安装了 boostrap 4所需的其他依赖性:

Jquery，popper.js 和 bootstrap.js

为此，您需要将. angle-cli. json 配置文件中的脚本数组修改为如下所示:

"scripts": [
"../node_modules/jquery/dist/jquery.slim.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"]

我猜您已经使用 Npm install ——保存 jquery popper.js安装了 jquery 和 popper，因此这些包可以在 node _ module 文件夹中使用。

这是我成功构建的另一种方法

1-安装引导程序

npm install bootstrap

这应该在 node _ module 下面添加 boostrap scss 文件。 (步骤2-6来自 https://code.visualstudio.com/docs/languages/css)

2-安装 node-sass

nmp install -g node-sass

这是需要传递的言语到 CSS

3-创建一个适合你的文件夹来保存 css 和生成的 css 文件。

your-project/
├── scss
│   └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss

4-创建包含以下内容的 custom.scss 文件:

@import "../node_modules/bootstrap/scss/bootstrap";

5-通过 Ctrl + Shift + B > Configure Tasks > Create Tasks.json file from template > Other 在 VSCode 中创建任务

Vscode 下的 tasks.json 文件是使用默认内容创建的。 将内容替换为

// Sass configuration
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [{
"label": "Sass Compile",
"type": "shell",
"command": "node-sass scss/custom.scss scss/custom-bootstrap.css",
"group": "build",
"problemMatcher": [
"$eslint-stylish"
]
}]
}

注意: 根据需要修改文件名和路径。

6-运行任务生成 css: Ctrl + Shift + B > ‘ Sass coding’or

7-遵循引导主题化过程中的步骤: (https://getbootstrap.com/docs/4.1/getting-started/theming/)