1. 程式人生 > 實用技巧 >Angular引用全域性scss,如按需引用bootstrap部分樣式,配合bootstrap的柵格化使用

Angular引用全域性scss,如按需引用bootstrap部分樣式,配合bootstrap的柵格化使用

個人平時用螞蟻的 NG-ZORRO 元件庫,並且也提供了"ng-row"和"ng-col",但是有些場景沒有bootstrap靈活,比如一個row中除了固定寬度的col,其他col需要佔滿剩餘的空間時使用NG-ZOEEO就不太靈活,但是使用bootstrap則可以很方便實現。

只使用bootstrap部分樣式的方案:

  1. 根據Bootstrap類名和對應的樣式複製到自己的專案中進行使用
  2. 按需匯入原始碼,打包時自動編譯

注意:

  之所以要按需匯入是因為不能全部引入,因為全部引入(包括cdn的.min.css)的css會做初始化,也就是會改變專案的一些其他預設樣式。

以上兩種方式都可以實現,但是按需匯入更優雅。

參考配置(我個人的做法):

  1. 新建"src/styles.scss" 這裡用於放"node_modules/bootstrap/scss/bootstrap.scss"下的部分程式碼,即按需匯入,而且在這裡匯入還能實現動態重新整理效果,便於除錯
  2. angular.json下styles 下 加上剛剛新建的檔案

效果(這裡同時匯入了less和scss是因為NG採用less,並且專案預設使用less,而scss是bootstrap的原始碼。但是不用安裝scss-loader,也不用更改專案的預設使用語言,因為Angular自帶多種常用的擴充套件)

src/styles.scss原始碼(按需匯入)

// 這個是全域性匯入,下面的程式碼就是從這裡複製的
//@import "node_modules/bootstrap/scss/bootstrap.scss";

// 這三個是公共的一些函式等,不可省略
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// 使用佈局的話只匯入這個就行了
@import "node_modules/bootstrap/scss/grid";
// 配合grid使用,如對齊方式
@import "node_modules/bootstrap/scss/utilities";