使用SCSS扩展Bootstrap4

摘要

由于打算写一个小网站，而我的时间又不是那么充裕，因此没有选择先后端分离的架构。

对于非先后端分离应用来讲，Bootstrap应该是目前的最佳前端框架之一了。

而Bootstrap4，是Bootstrap的最新版本，其更新内容中，有关自定义扩展的支持，相对来讲要比之前方便不少。

注：SCSS与SASS本质上是同样的，只不过在语法层面上来讲，SCSS相对更加贴近SASS。因此下文中默认使用SCSS的语法。

准备

安装环境

• 安装npm
• 安装SASS

下载源码

npm install bootstrap

Tips:

• 不要执行npm install bootstrap4，必须是bootstrap

目录结构

• 必须保持下面的目录结构

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

扩展

• 使用SASS编译完成自定义的扩展代码后，会将原bootstrap也打包在一块儿，而后只要引入这一个文件就能够了。
• 能够使用SASS的组件特性，来扩展bootstrap，这样会在编辑的源码，更加的有结构

引用Bootstrap

@import "node_modules/bootstrap/scss/bootstrap";

编译自定义源码

sass <XXX.scss> <XXX.css>

参考

• Theming Bootstrap
• SASS