Webpack - [ Bootstrap 4 中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

目錄搜尋

Getting started Accessibility（无障碍） Browsers and devices（浏览器和设备） Build tools（构建工具） Contents（内容） Download（下载） JavaScript Theming Bootstrap（主题Bootstrap） Webpack Components: Alerts Alerts（警报） Components: Badges Badges（徽章） Components: Breadcrumb Breadcrumb Components: Button group Button group（按钮组） Components: Buttons Buttons（按钮） Components: Cards Components: Carousel Cards（卡） Carousel（圆盘传送带） Components: Collapse Collapse（折叠） Components: Dropdowns Dropdowns（下拉菜单） Components: Forms Forms（表单） Components: Input group Input group（输入群组） Components: Input group Jumbotron（广告大屏幕） Components: List group List group（列表组） Components: Modal Modal（互动视窗） Components: Navbar Navbar（导航栏） Components: Navs Navs（导航栏） Components: Pagination Pagination（分页） Components: Popovers Popovers（弹出框） Components: Progress Progress（进度条） Components: Scrollspy Scrollspy（滚动监听） Components: Tooltips Tooltips（提示工具） Content Code（代码） Figures（图片区） Images（图片） Reboot（重置） Tables（表格） Typography（排版） Layout Grid（网格） Layout（布局） Media object（多媒体对象） Utilities for layout（排版通用类别） Migration Migrating to v4（迁移到v4） Utilities Borders（边框） Clearfix（清除浮动） Close icon（关闭图标） Colors（颜色） Display property（显示属性） Embeds（内嵌） Flex（弹性） Float（浮动） Image replacement（图像替换） Position（位置） Screenreaders（荧幕阅读器） Sizing（尺寸） Spacing（间隔） Text（文本） Vertical alignment（垂直对齐） Visibility（能见度）

文字

学习如何使用 Webpack 2 在您的项目中引入 Bootstrap。

安装 Bootstrap

安装引导作为一个使用NPM的Node.js模块。

导入JavaScript

进口引导JavaScript通常将这一行添加到应用程序的入口点%28index.js或app.js29%：

import 'bootstrap';

或者，你可以单独导入插件视需要：

import 'bootstrap/js/dist/util';import 'bootstrap/js/dist/dropdown';...

引导依赖于jQuery和波普尔，所以NPM会为您安装它们，如果需要的话。但它们必须由WebPack明确提供。将下列代码添加到plugins在您的webpack配置文件中：

  plugins: [    ...      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],        // In case you imported plugins individually, you must also require them here:
        Util: "exports-loader?Util!bootstrap/js/dist/util",
        Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",        ...      })    ...  ]

注意如果你选择单独导入插件，您还必须安装出口-装载机

进口样式

导入预编译SASS

要充分发挥Bootstrap的潜力并根据您的需要定制它，请使用源文件作为项目捆绑过程的一部分。

首先，创建自己的_custom.scss并使用它覆盖内置自定义变量然后，使用主Sass文件导入自定义变量，然后是Bootstrap：

@import "custom";@import "~bootstrap/scss/bootstrap";

要编译Bootstrap，请确保安装和使用所需的加载器：Sass-装载机，，，后置装载机带着自动复位器.在设置最少的情况下，您的WebPack配置应该包括此规则或类似的内容：

  ...  {
    test: /\.(scss)$/,
    use: [{
      loader: 'style-loader', // inject CSS to page    }, {
      loader: 'css-loader', // translates CSS into CommonJS modules    }, {
      loader: 'postcss-loader', // Run post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js          return [            require('precss'),            require('autoprefixer')          ];        }      }    }, {
      loader: 'sass-loader' // compiles SASS to CSS    }]  },  ...

导入编译后的CSS

或者，您也可以通过简单地将这一行添加到项目的入口点来使用Bootstrap的现成的css：

import 'bootstrap/dist/css/bootstrap.min.css';

在这种情况下，您可以使用现有的规则css没有任何特殊的修改WebPack配置。