Bootstrap4默认样式不对胃口？教你使用NPM+Webpack+SASS来定制 (3)

其中主要的 Sass 文件就是 src/scss/_theme.scss:

@charset "utf-8"; // 覆盖原设计样式的变量 @import "base/variables-theme"; // bootstrap 核心源码 @import "../../node_modules/bootstrap/scss/bootstrap"; // 自定义组件的样式 @import "base/variables"; @import "base/general"; @import "partials/menubar"; @import "partials/navbar"; @import "partials/card"; @import "partials/widget"; @import "partials/timeline"; @import "pages/signin"; @import "utilities/utilities";

一个简单修改主题颜色变量的方法是：

$theme-colors: ( "primary": #2c7be5, "secondary": #95aac9, "success": #00d97e, "info": #39afd1, "warning": #f6c343, "danger": #e63757, "light": #f8f9fa, "dark": #3b506c );

在项目根目录执行 npm run build 就能在页面看到修改结果。

小结

本文只是对 webpack 简单的使用，对于前端目前也正在学习，如有错误欢迎指出交流。

源码可从 GitHub 链接下载，https://github.com/dwosc/dunwoo-admin

或者关注微信公众号「顿悟源码」回复关键词「Bootstrap」 获取百度网盘下载链接。

主题将会不断更新优化，欢迎关注！