Webpack
Disce quomodo includendi Bootstrap in project usura Webpack.
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';
Vel, plugins singulatim prout opus est importare;
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap dependet ab Query et Popper , quae peerDependencies
proprietatis specificatae sunt; hoc significat quod fac ut utrumque addas ad package.json
usum tuum npm install --save jquery popper.js
.
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: [{
loader: 'style-loader', // inject CSS to page
}, {
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
}]
},
...
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']
}
]
}
...