Wɛbpak ɛn bɔndɛl dɛn
Lan aw fɔ put Bootstrap insay yu prɔjek yuz Wɛbpak ɔ ɔda bɔndɛl dɛn.
We yu de instɔl di Bootstrap
Instɔl bootstrap as wan Node.js mɔdyul we de yuz npm.
Impɔtant JavaSkript
Impɔt Bootstrap in JavaSkript bay we yu ad dis layn to yu ap in ɛntri pɔynt (bɔku tɛm index.js
ɔ app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Ɔda we de fɔ du dat, if yu jɔs nid sɔm pan wi plɔgin dɛn, yu kin impɔtɔt plɔgin dɛn wan bay wan as nid de:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap dipen pan Popper , we dɛn spɛsifa na di peerDependencies
prɔpati. Dis min se yu go gɛt fɔ mek shɔ se yu ad am to di we aw yu package.json
de yuz npm install @popperjs/core
am .
Impɔt Stayl dɛn
Impɔt Sass we dɛn dɔn kɔmpilayt bifo tɛm
Fɔ ɛnjɔy di ful pɔtnɛshɛl fɔ Bootstrap ɛn kɔstɔmayz am fɔ yu nid, yuz di sɔs fayl dɛn as pat pan yu prɔjek in bɔndling prɔses.
Fɔs, mek yu yon _custom.scss
ɛn yuz am fɔ ɔvalayz di kɔstɔm vɛriɔbul dɛn we dɛn dɔn bil insay . Dɔn, yuz yu men Sass fayl fɔ import yu kɔstɔm vɛriɔbul dɛn, dɔn Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Fɔ mek Bootstrap kɔmpilayt, mek shɔ se yu instɔl ɛn yuz di loda dɛn we yu nid: sass-loader , postcss-loader wit Autoprefixer . Wit minimal setup, yu webpack config shud inklud dis rule or similar:
// ...
{
test: /\.(scss)$/,
use: [{
// inject CSS to page
loader: 'style-loader'
}, {
// translates CSS into CommonJS modules
loader: 'css-loader'
}, {
// Run postcss actions
loader: 'postcss-loader',
options: {
// `postcssOptions` is needed for postcss 8.x;
// if you use postcss 7.x skip the key
postcssOptions: {
// postcss plugins, can be exported to postcss.config.js
plugins: function () {
return [
require('autoprefixer')
];
}
}
}
}, {
// compiles Sass to CSS
loader: 'sass-loader'
}]
}
// ...
Impɔt di CSS we dɛn dɔn kɔmpilayt
Ɔda we de fɔ du dat, yu kin yuz Bootstrap in CSS we dɔn rɛdi fɔ yuz bay we yu jɔs ad dis layn to di say we yu de go insay yu prɔjek:
import 'bootstrap/dist/css/bootstrap.min.css';
Insay dis kes yu kin yuz yu rul we de naw fɔ css
witout ɛni spɛshal modifyeshɔn to wɛbpak kɔnfig, pas yu nɔ nid sass-loader
jɔs stayl-lɔda ɛn css-lɔda .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...