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自带多种常用的扩展)

Angular引用全局scss,如按需引用bootstrap部分样式,配合bootstrap的栅格化使用

 

 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";

 

Angular引用全局scss,如按需引用bootstrap部分样式,配合bootstrap的栅格化使用

上一篇:JWT——json web token


下一篇:jquery 向下遍历DOM用法方法