如何在Angular中将Bootstrap 4与SASS结合使用


69

我想在通过Angular CLI创建的Angular(4+)项目中将Bootstrap 4与SASS一起使用。

我特别需要:

  • 使用SASS代替CSS作为全局样式和组件样式
  • 编译Bootstrap SASS源以及我的自定义* .scss样式
  • 确保我的自定义样式覆盖了Bootstrap源,因此我可以在需要时覆盖Bootstrap源,而无需编辑Bootstrap源本身(使升级Bootstrap源版本变得容易)
  • 每当我的任何* .scss文件更改(包括组件和全局样式)都添加到ng serve脚本时,都可以添加watch和自动重新编译

Answers:


131

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

编辑:此答案已更新为可以与较新版本的Angular CLI(已通过6.1.3版测试)一起使用。我在此答案的底部留下了较旧的Angular CLI的说明,但是我强烈建议您更新Angular CLI版本


使用新的ANGU 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']

通过这种方式,angular-cli将在执行诸如之类的命令时每当文件更改时自动监视并重新编译这些文件ng serve

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文件

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

我的建议是引用一个main.scss包含所有自定义SASS样式的文件:例如,_variables.scss用于自定义变量的a,_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 。

两个例子:

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


使用旧角CLI的说明

警告:我将不再保留答案的这一部分,因此建议继续阅读Angular CLI版本,并按照上述说明进行操作,以继续阅读它。

1)配置Angular CLI以使用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']

示例)。

通过这种方式,angular-cli将在执行以下命令时在文件发生更改时自动监视并重新编译这些文件 ng serve

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文件

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

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

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

两个例子:

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


1
杜德...谢谢。我从未关注过这样的帖子,并且它是第一次工作。您的工作... ThumbsUp!
Cwisking

不知道Bootstrap4 beta已发布。Bootstrap网站表示他们仍在Alpha6上。
rosstripi

@rosstripi的说法不正确
Francesco Borzi

1
@ShinDart非常感谢您,您节省了我很多时间!
卡达吉'17

1
如果任何你们的得到一个错误,因为这样“BrowserslistError:未知的浏览器主要的”,那么你需要更新你的角度CLI 1.7有关此问题的详细信息。在这里
Tiberiu Oprea的

20

除了@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";

1
您甚至可以将它们移出assets文件夹,以便为生产而构建时不包括它们(build --prod),因为可能不需要它们
Barry Tormey 18-4-12

8

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

0

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

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下的task.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/


-1

万一其他人遇到我使用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文件夹中可用。


那建议是错误的:ng \ ngx-bootstrap的存在只是让您根本不导入jquery。此警告必须保持,因为它不FDO发展和部署创建问题
netalex
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.