zoukankan      html  css  js  c++  java
  • 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";
  • 相关阅读:
    SQL Server临时表的使用方案
    SqlServer 临时表
    SqlServer 数据表数据移动
    IQ/OQ/DQ/PQ
    (转)C# WebApi 跨域问题解决方案:CORS
    (转).Net高级进阶,在复杂的业务逻辑下,如何以最简练的代码,最直观的编写事务代码?
    (转)C#动态webservice调用接口
    (转)wsdl文件用SoapUI快速创建WebService,CXF生成客户端代码
    (转)C# Oracle数据库操作类
    (转)C#连接Oracle数据库(直接引用dll使用)
  • 原文地址:https://www.cnblogs.com/laeni/p/13368351.html
Copyright © 2011-2022 走看看