Webpack et bundlers
Disce quomodo includendi Bootstrap in project utendo Webpack vel aliis bundlers.
installing Bootstrap
Install bootstrap ut Node.js moduli utens npm.
Importat JavaScript
Import Bootstrap scriptor JavaScript addendo hanc lineam ad punctum ingressum app ( index.js
vel plerumque app.js
);
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Vel, si pauca tantum elaborationibus nostris egeas, plugins singulatim prout opus est importare;
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap pendet a Popper , quod in peerDependencies
proprietate specificatur . Id quod habebis fac ut id addas ut tuis package.json
utaris npm install @popperjs/core
.
Importat Styles
Inferentes Precompiled Sass
Ad plenam potentiam Bootstrap fruendam et ad necessitates tuas customize, fasciculis fons utere ut pars processus fasciculi propositi tui.
Primum, fac tuum _custom.scss
et utere ad variabilium consuetudinem aedificatorum delendi . Tum, fasciculo Sass principali utere ut tuam consuetudinem variabilium importet, quam sequitur Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Pro Bootstrap compilare, fac te installare et utere oneribus debitis: sass- onerator , postcss- onerator cum autopraefixore . Cum minimam paroeciam, webpack aboutconfig tuum hanc regulam vel similem includere debet:
// ...
{
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'
}]
}
// ...
Importat Composuit CSS
Vel, CSS Bootstrap uti licet, hanc lineam simpliciter addendo ad punctum ingressum propositi:
import 'bootstrap/dist/css/bootstrap.min.css';
Hoc in casu regulam tuam existentem sine ullis modificationibus specialibus config ad webpack potes uti, nisi solum stylo oneratus et css-loadercss
non indiges .sass-loader
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...