Angular引用全域性scss,如按需引用bootstrap部分樣式,配合bootstrap的柵格化使用
阿新 • • 發佈:2020-07-23
個人平時用螞蟻的 NG-ZORRO 元件庫,並且也提供了"ng-row"和"ng-col",但是有些場景沒有bootstrap靈活,比如一個row中除了固定寬度的col,其他col需要佔滿剩餘的空間時使用NG-ZOEEO就不太靈活,但是使用bootstrap則可以很方便實現。
只使用bootstrap部分樣式的方案:
- 根據Bootstrap類名和對應的樣式複製到自己的專案中進行使用
- 按需匯入原始碼,打包時自動編譯
注意:
之所以要按需匯入是因為不能全部引入,因為全部引入(包括cdn的.min.css)的css會做初始化,也就是會改變專案的一些其他預設樣式。
以上兩種方式都可以實現,但是按需匯入更優雅。
參考配置(我個人的做法):
- 新建"src/styles.scss" 這裡用於放"node_modules/bootstrap/scss/bootstrap.scss"下的部分程式碼,即按需匯入,而且在這裡匯入還能實現動態重新整理效果,便於除錯
- 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";