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

Posted 2023-02-22

【中文标题】如何在 Angular 中使用带有 SASS 的 Bootstrap 4

【英文标题】：How to use Bootstrap 4 with SASS in Angular

【发布时间】：2018-01-21 11:34:58

【问题描述】：

我想在使用 Angular CLI 创建的 Angular(4+) 项目中使用带有 SASS 的 Bootstrap 4。

我特别需要：

使用 SASS 而不是 CSS 作为全局样式和组件样式 将 Bootstrap SASS 源代码与我的自定义 *.scss 样式一起编译 确保我的自定义样式覆盖 Bootstrap 源，这样我就可以在需要时覆盖 Bootstrap 源，而无需编辑 Bootstrap 源本身（便于升级 Bootstrap 源版本） 每当我的任何 *.scss 文件更改（组件和全局样式）到 ng serve 脚本时添加监视和自动重新编译

【参考方案1】：

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

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

---

使用新 ANGULAR 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) 添加引导程序 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 文件

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

我的建议是引用一个包含所有自定义 SASS 样式的 main.scss 文件：例如，_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 的替换。

有些项目可以让你在不使用 jQuery 的情况下使用 Bootstrap。

两个例子：

ngx-bootstrap

ng-bootstrap

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

---

使用旧 Angular CLI 的说明

警告：我将不再保留这部分答案，因此我建议继续阅读它，update your Angular CLI version 并按照上述说明进行操作。

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

运行：

ng set defaults.styleExt scss

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

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

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

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

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

(example).

这样，当你执行ng serve之类的命令时，当这些文件发生变化时，angular-cli 将自动监视并重新编译这些文件。

3) 添加引导程序 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 文件

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

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

因此，在您的 .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"?

【讨论】：

老兄...谢谢。我从来没有关注过这样的帖子，它第一次奏效。你的...竖起大拇指！

不知道 Bootstrap4 测试版已经发布。 Bootstrap 网站说他们仍在 Alpha6 上。

@rosstripi 这不是真的

@ShinDart 非常感谢你，你为我节省了这么多时间！

如果你们中的任何人收到“BrowserslistError: Unknown browser major”这样的错误，那么您需要将您的 Angular CLI 更新到 1.7。有关此问题的更多信息here。

【参考方案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";

【讨论】：

您甚至可以将它们移出 assets 文件夹，以便在为生产 (build --prod) 构建时不包含它们，因为它们可能不需要

【参考方案3】：

从版本 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";

【参考方案4】：

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

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 在 VSCode 中创建任务 > 配置任务 > 从模板创建 tasks.json 文件 > 其他

.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 compile' or

7 - 按照引导主题过程中的步骤进行操作：(https://getbootstrap.com/docs/4.1/getting-started/theming/)

【参考方案5】：

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

jquery、popper.js 和 bootstrap.js

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

【讨论】：

该建议是错误的：ng\ngx-bootstrap 的存在只是为了让您根本不导入 jquery。此警告必须保留，因为它不会在开发和部署时产生问题