如何在Angular

Question

我想在使用Angular CLI创建的Angular（4+）项目中使用Bootstrap 4和SASS。

特别需要：

• 使用SASS代替CSS作为全局样式和组件样式
• 编译Bootstrap SASS源以及我的自定义* .scss样式
• 确保我的自定义样式覆盖Bootstrap源，因此我可以在需要时覆盖Bootstrap源，而无需编辑Bootstrap源本身（可以轻松升级Bootstrap源版本）
• 添加手表＆amp;每当我的任何* .scss文件更改（组件和全局样式）到ng serve脚本
时自动重新编译

Answer 1

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

编辑 ：此答案已更新，可与较新版本的Angular CLI配合使用（已通过6.1.3版测试）。我在本答案的底部留下了旧Angular CLI的说明，但我强烈建议您update your Angular CLI version 。

使用新的角度CLI（版本6或更高版本）

的说明

1）配置Angular CLI以使用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之类的命令时，angular-cli会自动观察并重新编译这些文件。

3）添加Bootstrap 4

通过npm安装Bootstrap 4：

npm install bootstrap --save

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

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

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

4）添加自定义（全局）SASS文件

可以在app/assets/scss下添加任何应该全局影响项目的其他SASS样式（与单个Component样式不同），然后在styles的{​​{1}}数组中引用。

我的建议是引用单个angular-cli.json文件，该文件将包含您的所有自定义SASS样式：例如，您的自定义变量为main.scss，您的全局规则为_variables.scss文件，等。

因此，在_global.scss中，您只会引用一个自定义angular-cli.json文件：

main.scss

内部包含所有自定义全局* SASS代码：

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

*请注意，您 包含单个组件的// main.scss @import "variables"; @import "global"; // import more custom files... 样式文件。

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

有些项目允许您使用Bootstrap 而不使用jQuery 。

两个例子：

• ngx-bootstrap

• ng-bootstrap

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

使用OLD ANGULAR CLI的说明

警告 ：我不再保留这部分答案了，所以请继续阅读，我建议update your Angular CLI version并关注上面的说明。

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

执行命令

*.scss

这会影响您的ng set defaults.styleExt scss配置文件（example）。

注意：如果您从头开始，可以使用Angular CLI创建一个新项目： .angular-cli.json 这相当于正常创建一个新项目，然后运行上面提到的命令。

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

要完成此操作，您只需将样式文件从ng new my-project --style=scss重命名为.css，然后相应地更改.scss配置：

@Component({ ... })

（example）。

这样，当你执行styleUrls: ['./my-component.scss']之类的命令时，angular-cli会自动观察并重新编译这些文件。

3）添加Bootstrap 4

通过npm安装Bootstrap 4：

ng serve

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

styles

（example）。

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

4）添加自定义（全局）SASS文件

可以在"styles": [ "../node_modules/bootstrap/scss/bootstrap.scss", /* ... */ ], 下添加任何应该全局影响项目的其他SASS样式（与单个Component样式不同），然后在app/assets/scss的{​​{1}}数组中引用。

我的建议是引用单个styles文件，该文件将包含您的所有自定义SASS样式：例如，您的自定义变量为.angular-cli.json，您的全局规则为main.scss文件，等等。（example）。

因此，在_variables.scss中，您只会引用一个自定义_global.scss文件：

.angular-cli.json

内部包含所有自定义全局* SASS代码：

main.scss

*请注意，您 包含单个组件的"styles": [ "../node_modules/bootstrap/scss/bootstrap.scss", "assets/scss/main.scss" ], 样式文件。

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

有些项目允许您使用Bootstrap 而不使用jQuery 。

两个例子：

• ngx-bootstrap

• ng-bootstrap

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

Answer 2

除了@ ShinDarth的answer之外，你可能想要一个更小的解决方案，只导入你需要的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";

Answer 3

从版本6开始 应该是

"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";

Answer 4

如果其他人遇到使用angular-cli运行Bootstrap 4时遇到的Javascript依赖项问题，您还需要让angular-cli编译器知道您已经安装了boostrap 4需要的其他依赖项：

jquery，popper.js和bootstrap.js

为此，您需要将.angular-cli.json配置文件中的scripts数组修改为：

"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 --save jquery popper.js 安装了jquery和popper，所以这些包在node_modules文件夹中可用。

Answer 5

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

1-安装引导程序

npm install bootstrap 

这应该在node_modules下添加boostrap scss文件。 （步骤2-6来自https://code.visualstudio.com/docs/languages/css）

2-安装node-sass

nmp install -g node-sass

这需要将sass转换为css

3-在适合您保存scss和生成的css文件的位置创建一个文件夹。例如

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

4-创建具有以下内容的custom.scss文件：

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

5-通过Ctrl + Shift + B>配置任务>从模板创建task.json文件>其他

，在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编译”或

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