Bootstrap 是一个流行的前端样式库，可以方便快速的构建应用，但默认样式可能不尽人意，本文就介绍如何使用 NPM, Webpack, SASS 针对它的源码来定制自己的主题。版本使用的是 Bootstrap v4.3.1。

本文提供了一个使用此方式编写的一个后台管理模板 Dunwoo Admin，文末有获取源码的方式。演示地址：

安装 Node.js

Webpack 是对前端资源进行打包和编译的工具，它依赖于 Node.js，首先介绍下如何配置和安装绿色版的 Node.js。

下载绿色版本：https://nodejs.org/en/download/ （以 node-v10.16.1-win-x64.zip 为例）

并解压到某个目录下，比如 D:\node-v10.16.1, 然后设置系统环境变量：

NODE_HOME=D:\node-v10.16.1 NODE_PATH=%NODE_HOME%\node_modules path=增加;%NODE_HOME%;

在 Node.js 主目录新建 node_global 和 node_cache 两个目录，并使用以下命令设置 npm 全局安装模块的位置以及下载缓存路径：

npm config set prefix "D:\node-v10.16.1\node_global" npm config set cache "D:\node-v10.16.1\node_cache"

最后，可以在命令行使用 node -v 和 npm -v 验证是否安装成功。

Webpack 安装和配置

安装 Webpack 之前，需要使用 npm init 在项目根目录生成一个 package.json 文件，它类似 Java 中 Maven 的 pom.xml, 用于描述项目的元信息，名称、版本等，更重要的是它指定了项目运行依赖的模块，下面就是本项目此文件的内容：

{   "name": "dunwoo-admin",   "version": "1.0.0",   "description": "Bootstrap 4 Theme",   "author": "wskwbog",   "license": "MIT",   "private": true,   "keywords": [],   "scripts": {     "build": "webpack --progress --colors",     "dev": "webpack-dev-server --inline --devtool eval-source-map --progress",     "start": "npm run dev"   },   "devDependencies": {     "@babel/core": "^7.2.2",     "@babel/plugin-proposal-object-rest-spread": "^7.3.2",     "@babel/preset-env": "^7.3.1",     "autoprefixer": "^9.4.7",     "babel-loader": "^8.0.6",     "css-loader": "^3.2.0",     "node-sass": "^4.12.0",     "postcss-loader": "^3.0.0",     "sass-loader": "^7.2.0",     "style-loader": "^1.0.0",     "webpack": "^4.39.2",     "webpack-cli": "^3.3.7",     "webpack-dev-server": "^3.8.0",     "mini-css-extract-plugin": "^0.8.0",     "clean-webpack-plugin": "^3.0.0"   },   "dependencies": {     "bootstrap": "^4.3.1",     "jquery": "^3.3.1",     "popper.js": "^1.14.7"   } }

其中关键配置的意义是：

配置好 package.json 后就可以在当前目录运行 npm install 依赖的模块就会下载到当前目录的 node_modules 目录中。

在开始使用 Webpack 之前，还要进行一些配置，这也是比较麻烦的地方，本项目的 webpack.config.js配置内容如下：