DIY专属Bootstap4主题：NPM+Webpack+SASS魔改之旅

前端

2023-12-10 21:08:49

DIY 你的 Bootstrap 4 主题，尽情挥洒创意

准备踏上创建自己的 Bootstrap 4 主题之旅了吗？在这篇详尽的指南中，我们将带你一步步了解整个过程，让你可以随心所欲地打造你的梦想主题。

1. 前期准备：收集必备材料

要开始创建 Bootstrap 4 主题，你需要准备一些必需品：

文本编辑器： 选择你喜欢的文本编辑器，例如 VSCode、Sublime Text 或 WebStorm。
NodeJS： 作为运行环境和包管理器，NodeJS 至关重要。
NPM： 作为 NodeJS 的包管理器，NPM 可以轻松安装各种实用工具。
Webpack： 一个现代化的模块加载器和打包工具，可以将不同的模块打包成一个或多个 bundle.js。
SASS（Syntactically Awesome Style Sheets）： 一个扩展的 CSS 语言，其强大之处在于可嵌套的样式、变量、混入等等特性。
Bootstrap 源码： 一个包含 Bootstrap 源码的 zip 文件。

2. 源码导入：解压并开始工作

现在是安装和配置工具的时候了。首先，使用文本编辑器创建一个空文件夹作为项目文件夹，并在其中创建一个 package.json 文件。

接下来，使用以下代码填写 package.json：

{
  "name": "bootstrap-theme-diy",
  "version": "1.0.0",
  "description": "My Bootstrap 4 theme",
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "bootstrap": "^4.3.1",
    "npm-run-all": "^4.1.5",
    "sass": "^1.26.5",
    "sass-loader": "^9.0.1",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.12"
  },
  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack --mode production"
  }
}

接下来，安装依赖项：

npm install

将下载的 Bootstrap 源码解压到项目文件夹中。然后创建一个 scss 文件夹，并将 Bootstrap 源码中的 scss 文件夹移动到项目文件夹的 scss 文件夹中。该文件夹包含 Bootstrap 的 SASS 源码。

3. 配置 Webpack：调配工具，火力全开

在项目文件夹中创建一个 webpack.config.js 文件，用于配置 Webpack：

const path = require('path');

module.exports = {
  entry: './scss/bootstrap.scss',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bootstrap.min.css'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].min.css',
              outputPath: 'dist'
            }
          },
          {
            loader: 'extract-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
};