Bootstrap/scss nhập góc

Để ghi đè cài đặt Bootstrap (các biến), hãy đặt mã trước các câu lệnh @import của Bootstrap - ví dụ được cung cấp trong

> npm i bootstrap@latest

Máy chủ phát triển

Chạy ng serve cho máy chủ nhà phát triển. Điều hướng đến

> npm i bootstrap@latest

Angular và Bootstrap là những công cụ rất hữu ích khi phát triển giao diện người dùng. Bạn có thể xây dựng các ứng dụng trang đơn với các tính năng mạnh mẽ của Angular và làm cho chúng trông đẹp mắt bằng cách sử dụng các lớp và thành phần Bootstrap. Cả hai đều có phiên bản mới, trùng hợp là mỗi phiên bản đều có phiên bản 4. Tuy nhiên, Bootstrap 4 hiện đang trong giai đoạn thử nghiệm

Trong bài đăng trên blog này, tôi sẽ giải thích cách nhập mô-đun Bootstrap 4 Sass trong ứng dụng Angular 4 dưới dạng SCSS

CẬP NHẬT - 05/12/2017. Angular vừa ra mắt phiên bản 5. 0. 0 và phương pháp trong bài đăng này cũng áp dụng cho Angular 5

Tạo một ứng dụng Angular 4 mới để sử dụng SCSS

Theo mặc định, các ứng dụng Angular 4 sử dụng css làm tệp kiểu. Tuy nhiên, điều này có thể được sửa đổi. Để đạt được điều này, chúng tôi chỉ bao gồm một thuộc tính

cd my-new-app
npm install --save @ng-bootstrap/ng-bootstrap

ng new my-new-app --style=scss

Ở đây “my-new-app” là tên ứng dụng của chúng ta. Bạn có thể thay thế bằng tên mà bạn chọn cho ứng dụng của mình

Cài đặt Mô-đun Ng-Bootstrap

Bắt đầu từ Angular 2, có một mô-đun tích hợp cho các thành phần javascript của Bootstrap 4. NgBootstrap. Bây giờ, hãy đưa nó vào ứng dụng của chúng ta. Trước tiên chúng ta nên vào thư mục ứng dụng của mình và sau đó cài đặt mô-đun @ng-bootstrap bằng npm

cd my-new-app
npm install --save @ng-bootstrap/ng-bootstrap

Bây giờ, hãy tích hợp mô-đun này vào ứng dụng của chúng tôi. mô-đun. tập tin ts. Vui lòng xem cách chúng tôi nhập NgbModule vào tệp TypeScript và nhập trong lớp AppModule trong trình trang trí NgModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Cài đặt Bootstrap Sass và nhập

Bây giờ, chúng ta cần cài đặt Bootstrap 4 và nhập tệp scss chính của nó vào ứng dụng của chúng ta. Ng-bootstrap chỉ cài đặt các thành phần Bản in. Chúng tôi cần cài đặt Bootstrap mà không bao gồm các tệp Javascript

npm install --save [email protected]

Sau đó, chúng ta cần nhập Bootstrap Sass vào ứng dụng của mình. trong phong cách. scss thêm dòng này

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

Tùy chỉnh biến Bootstrap

Tôi thích tạo một tệp riêng để đặt tất cả các tùy chỉnh bootstrap, chẳng hạn như màu liên kết. Hãy để chúng tôi tạo thư mục “style” trong “src/assets” và tạo một tệp có tên “_bootstrap_customizations. scss”

Sau đó, thay đổi màu liên kết thành màu đỏ trong tất cả ứng dụng của chúng tôi bằng cách sử dụng biến $link-color của bootstrap

$link-color: red !default;

Để làm cho điều này có hiệu lực trên toàn cầu trong ứng dụng của chúng tôi, chúng tôi nhập tệp này theo kiểu của chúng tôi. scss trước bootstrap. Bây giờ phong cách của chúng tôi. cscc trở thành

@import "./assets/styles/bootstrap_customizations.scss";
@import "../node_modules/bootstrap/scss/bootstrap.scss";

Bài kiểm tra

Để kiểm tra tất cả những điều này, chúng ta hãy tạo một vùng chứa và thẻ trong ứng dụng của mình. thành phần. html và đặt một số văn bản và liên kết ở đó

Thay đổi ứng dụng. thành phần. html bằng cách xóa tất cả và chèn

<div class="container">
  <div class="card">
    <div class="card-body">
      <h1>Hello World!</h1>
      <p>
        <a href="#">Link to Mars</a>
      </p>
    </div>
  </div>
</div>

Chạy ứng dụng bằng cách sử dụng angular-cli

ng serve

Mở trình duyệt của bạn và điều hướng đến “localhost. 4200” và kết quả sẽ tương tự như thế này

Phần kết luận

Có thể thấy, việc đưa mô-đun Bootstrap 4 Sass vào các ứng dụng Angular 2/4/5 rất đơn giản

Tôi có thể sử dụng Bootstrap với SCSS không?

Làm cách nào để nhập Bootstrap CSS trong Angular?

Bạn có thể sử dụng SCSS với góc cạnh không?

Làm cách nào để đưa tệp SCSS vào Angular?