?
This document uses PHP Chinese website manual Release
學(xué)習(xí)如何使用 Webpack 2 在您的項(xiàng)目中引入 Bootstrap。
安裝 Bootstrap
安裝引導(dǎo)作為一個使用NPM的Node.js模塊。
導(dǎo)入JavaScript
進(jìn)口引導(dǎo)JavaScript通常將這一行添加到應(yīng)用程序的入口點(diǎn)%28index.js或app.js29%：
import 'bootstrap';
或者，你可以單獨(dú)導(dǎo)入插件視需要：
import 'bootstrap/js/dist/util';import 'bootstrap/js/dist/dropdown';...
引導(dǎo)依賴于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", ... }) ... ]注意如果你選擇單獨(dú)導(dǎo)入插件，您還必須安裝出口-裝載機(jī)
進(jìn)口樣式
導(dǎo)入預(yù)編譯SASS
要充分發(fā)揮Bootstrap的潛力并根據(jù)您的需要定制它，請使用源文件作為項(xiàng)目捆綁過程的一部分。
首先，創(chuàng)建自己的_custom.scss并使用它覆蓋內(nèi)置自定義變量然后，使用主Sass文件導(dǎo)入自定義變量，然后是Bootstrap：
@import "custom";@import "~bootstrap/scss/bootstrap";
要編譯Bootstrap，請確保安裝和使用所需的加載器：Sass-裝載機(jī)，，，后置裝載機(jī)帶著自動復(fù)位器.在設(shè)置最少的情況下，您的WebPack配置應(yīng)該包括此規(guī)則或類似的內(nèi)容：
... {
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 }] }, ...導(dǎo)入編譯后的CSS
或者，您也可以通過簡單地將這一行添加到項(xiàng)目的入口點(diǎn)來使用Bootstrap的現(xiàn)成的css：
import 'bootstrap/dist/css/bootstrap.min.css';
在這種情況下，您可以使用現(xiàn)有的規(guī)則css沒有任何特殊的修改WebPack配置。