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

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"
  }
}

其中关键配置的意义是：

  • scripts: 配置不同功能脚本命令的缩写，可以使用 npm run build|dev 简单方便的调用
  • devDependencies: 指定项目开发所需要的模块
  • dependencies: 指定项目运行所依赖的模块

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

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

// 引入 node 相关模块
const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: {
    theme: './src/js/theme.js' // 入口文件
  },
  output: { // 打包输出目录
    path: path.resolve(__dirname, './dist/'),
    filename: 'js/[name].js'
  },
  devServer: { // 本地开发服务器
    contentBase: './dist/',
    host: '0.0.0.0',
    port: 3000,
    writeToDisk: true
  },
  module: {
    rules: [{
      test: /(\.jsx|\.js)$/, // 正则匹配 .jsx 或 .js 后缀的文件
      loader: 'babel-loader',
      exclude: /node_modules/
    }, {
      test: /\.(scss)$/, // 正则匹配 .scss 后缀的文件
      use: [{
        // loader: 'style-loader', // inject CSS to page
        loader: MiniCssExtractPlugin.loader,
        options: {
          // publicPath: '../',
          // hmr: process.env.NODE_ENV === 'development',
        },
      }, {
        loader: 'css-loader', // translates CSS into CommonJS modules
      }, {
        loader: 'postcss-loader', // Run postcss actions
        options: {
          plugins: function () { // postcss plugins, can be exported to postcss.config.js
            return [
              require('autoprefixer')
            ];
          }
        }
      }, {
        loader: 'sass-loader' // compiles Sass to CSS
      }]
    }]
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns:['js/*', 'css/*']
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: 'css/[id].css',
    })
  ]
}

接下来分析下各配置项的作用。

entry/output

entry: {
  theme: './src/js/theme.js'
},
output: {
  path: path.resolve(__dirname, './dist/'),
  filename: 'js/[name].js'
},

入口（entry）和出口（output）的配置比较简单，指定了从哪个模块开始构建以及将编译结果输出目的地。其中 **__dirname** 表示 webpack.config.js 所在的目录。

webpack-dev-server

通常开发的过程是：

  1. 修改 scss 样式
  2. 然后命令行运行 npm run build 编译
  3. 最后刷新页面看效果

这几步完全可以自动化，Webpack 就提供了一个本地开发 Web 服务器 webpack-dev-server, 它可以监听代码的改动并自动编译和发布，基本配置如下：

devServer: {
  contentBase: './dist/', // 资源根目录
  host: '127.0.0.1', // 绑定主机 IP
  port: 3000, // 监听端口
  writeToDisk: true // 将编译结果写到磁盘
},

更多配置项可参考：https://webpack.js.org/configuration/dev-server/

接下来就是 Webpack 两个比较重要概念的配置, Loader 和 Plugin:

  • Loader: 编译和转换模块源码，比如将 scss 编译成 css, 将 ES6 转为 JS, 将 JSX 文件转成 JS 文件等等
  • Plugin: 用于解决 Loader 无法实现的功能，比如清理，打包优化和压缩等等

Babel

Bootstrap 4 使用 ES6 重写了所有的 JS 组件，而 Babel 就是一个 JavaScript 编译器，它可以将使用 ES6 语法编写的文件，转成浏览器兼容的 JS 文件。在 package.json 中与它相关的模块如下：

  • @babel/core: Babel 编译的核心
  • @babel/preset-env: 为每个环境预设的 Babel
  • babel-loader: 结合使用 Babel 和 webpack 编译 JavaScript
  • @babel/plugin-proposal-object-rest-spread: 支持 ES6 扩展运算符（...）

与把它相关的配置文件通常会放到一个名为 .babelrc.js 的文件中：

module.exports = {
  presets: [
    [
      '@babel/env',
      {
        loose: true,
        modules: false,
        exclude: ['transform-typeof-symbol']
      }
    ]
  ],
  plugins: [
    '@babel/plugin-proposal-object-rest-spread'
  ]
};

CSS 模块

Webpack 提供了两个 Loader 来处理样式，css-loader 和 style-loader，二者处理的任务不同：

  • css-loader: 解析 @import 和 url() 方法，实现类似 import/require() 的功能
  • style-loader: 将样式加入到页面中，与 css-loader 结合使用可以把样式嵌入到 webpack 打包后的 JS 文件中

CSS 预处理器比如 Sass 对原生 CSS 进行了扩展，添加了变量，函数等特性，使得 css 的编写更加灵活，Webpack 配置以下两个 Loader 后就能直接使用：

  • sass-loader: 将 scss 编译成 css
  • postcss-loader: 主要使用 autoprefixer 添加浏览器前缀

具体配置可查看上文的 webpack.config.js, 有一点需要注意的是: 高版本的 autoprefixer, 支持的浏览器配置通常放在 .browserslistrc 文件中。

mini-css-extract-plugin

将 CSS 提取为独立文件的插件，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，支持 CSS 和 SourceMaps 的按需加载，依赖 Webpack 4 以上的版本。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 指定资源路径, 默认与 webpackOptions.output 相等
              publicPath: '../',
              // 模块热加载相关配置
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // all options are optional
      filename: '[name].css',
      chunkFilename: '[id].css',
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
  ],
};

更多配置项可参考：https://webpack.js.org/plugins/mini-css-extract-plugin/

clean-webpack-plugin

Webpack 构建之前用于删除和清理构建文件夹的插件，这个插件有个属性 cleanOnceBeforeBuildPatterns 可以配置哪些文件和文件夹要删除，哪些不删除，一个简单的示例如下：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    plugins: [
      new CleanWebpackPlugin({ // 只清理 js 和 css 目录中的文件
        cleanOnceBeforeBuildPatterns:['js/*', 'css/*']
      }),
    ],
};

更多配置项可参考：https://www.npmjs.com/package/clean-webpack-plugin

Bootstrap 主题定制方法

定制 Bootstrap 4 主题有两个方法，一是直接修改源码，但这样后续不好升级；二是修改它提供的 SCSS 变量灵活定制，这样对源码没有侵入性，可以在不触及核心文件的情况下完全重新设计 Bootstrap 4 的样式。项目文件的基本结构如下：

dunwoo-admin/
├── .babelrc.js
├── .browserslistrc
├── .gitignore
├── package.json
├── webpack.config.js
├── README.md
├── src/
│   ├── scss/
│   │   ├── base/
│   │   ├── pages/
│   │   ├── partials/
│   │   ├── utilities/
│   │   ├── vendor/
│   │   └── _theme.scss
│   ├── js/
│   │   ├── modules/
│   │   ├── vendor/
│   │   └── theme.js
│   │── fonts/
│   └── img/
└── dist/
    ├── css/
    │   └── theme.css
    ├── js/
    │   └── theme.js
    ├── img/
    ├── fonts/
    └── libs/

其中主要的 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」 获取百度网盘下载链接。

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

原文地址：https://www.cnblogs.com/wskwbog/p/11509377.html

时间： 2024-10-08 09:00:34

Bootstrap4默认样式不对胃口？教你使用NPM+Webpack+SASS来定制的相关文章

浏览器默认样式

1 html, address, 2 blockquote, 3 body, dd, div, 4 dl, dt, fieldset, form, 5 frame, frameset, 6 h1, h2, h3, h4, 7 h5, h6, noframes, 8 ol, p, ul,center, 9 dir, hr, menu, pre{ display: block} 10 /* 以上按照block显示,没有规定的则按照默认的inline显示 */ 11 12 li { display:

浏览器默认样式及reset

写在前面 首先纠正一个易错概念.div并非生来就是块元素,而是每个浏览器都有一套默认的css样式(优先级最低),默认样式里会把div设置成display: block;还有margin,padding等.这就是不同浏览器初始化样式不同的原因.也是为什么要做css reset的原因. 注:chrome等可以在调试工具里看到默认样式,是不可修改的,置灰的,如下图.各浏览器默认样式详情请参考<浏览器默认样式对比表>. 1.浏览器默认样式 这里无需过多赘述,最直观的就是上表,给大家几个地址: 1.浏览

bootstrap对HTML标签的默认样式有哪些修改？

CSS Reset:重新设置HTML标签的默认样式. (1)重设了盒子模型的计算方法 * { box-sizing: border-box; } (2)重设了所有元素的默认字体 14px/1.42857143 "Helvetica Neue" (3)body { margin: 0; color: #333; background-color: #fff;} (4)h1~h6 { font-size: xxpx; margin-top: 20px/10px; margin-botton

去除表单元素的默认样式

一.使用 appearance 改变 webkit 浏览器的默认外观 webkit 内核浏览器具备私有属性" -webkit-appearance "可以改变元素的外观,该属性非常强大,适合大部分标签,这对于 webkit 的页面优化带来极大的帮助. 禁用表单input.select元素的默认外观 input,select{ -webkit-appearance:none; appearance:none; } 二.使用伪元素改变 IE10 表单元素默认外观 禁用 select 默认下

浏览器默认样式(user agent stylesheet)+cssreset

每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整齐.不同浏览器甚至同一浏览器不同版本的默认样式是不同的.这才带来了很多的坑,让大家用cssreset去填.. 一.浏览器默认样式 了解各浏览器的默认样式能让我们对每条Reset规则的写法做到心中有数,对我们了解浏览器的差异,写各浏览器兼容的代码也有很大帮助. 所以先看看浏览器默认样式长什么样: FF

去掉或者修改 input、select 等表单的【默认样式 】

隐藏input等表单的默认样式的背景: textarea,select,input{-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;} 让div看起来像按钮: div{appearance:button;-moz-appearance:button; /* Firefox */-webkit-appearance:button; /* Safari 和 Chrome */

用纯css改变下拉列表select框的默认样式（不兼容IE10以下）

在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计. 一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没办法做!你应该不会抱怨设计师,其实更改下拉输入的默认样式并不是非常难的! 下面是解决方案. 我们看到默认的下载选择框在firefox和chrome中是有些不同的 Chrome 和 Firefox 中分

ionic默认样式android和ios差异

ionicframework中android和ios在默认样式上有一些不同的地方,官方文档中都有说明,但是经常会想不起. 一.差异: 1.tab位置,$ionicConfigProvider, tabs.position(value) Android 默认是顶部(top),Ios是底部 (bottom) 2.标题android默认靠左边,ios默认居中 navBar.alignTitle(value) 二:解决方案: 1.将Android的tab默认设置是底部显示: 修改app.js文件如下:

Windows UWP开发系列 – 控件默认样式

今天用一个Pivot控件的时候,想修改一下它的Header样式,却发现用Blend和VS无法导出它的默认样式了,导致无法下手,不知道是不是Blend的bug. 在网上搜了一下,在MSDN上还是找到了它的默认样式的,位置如下:https://msdn.microsoft.com/en-us/library/windows/apps/mt299142.aspx.其它的控件默认样式这个地址上也有,如果有需要的可以查询一下.