使用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