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. 安装bootstrap依赖: npm i bootstrap
2. 新建"src/styles.scss" 这里用于放"node_modules/bootstrap/scss/bootstrap.scss"下的部分代码，即按需导入，而且在这里导入还能实现动态刷新效果，便于调试
3. 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";