Vefpakki
Lærðu hvernig á að hafa Bootstrap með í verkefninu þínu með því að nota Webpack.
Setur upp Bootstrap
Settu upp bootstrap sem Node.js mát með því að nota npm.
Flytur inn JavaScript
Flyttu inn JavaScript Bootstrap með því að bæta þessari línu við inngangspunkt forritsins þíns (venjulega index.js
eða app.js
):
import 'bootstrap';
Að öðrum kosti geturðu flutt inn viðbætur hver fyrir sig eftir þörfum:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap fer eftir jQuery og Popper , sem eru tilgreind í peerDependencies
eigninni; þetta þýðir að þú verður að ganga úr skugga um að bæta þeim báðum við package.json
notkun þína npm install --save jquery popper.js
.
Flytja inn stíla
Flytur inn forsamsett Sass
Til að njóta allra möguleika Bootstrap og sérsníða það að þínum þörfum, notaðu frumskrárnar sem hluta af buntferli verkefnisins.
Fyrst skaltu búa til þína eigin _custom.scss
og nota hana til að hnekkja innbyggðu sérsniðnu breytunum . Notaðu síðan aðal Sass skrána þína til að flytja inn sérsniðnar breytur þínar, fylgt eftir með Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Til að Bootstrap geti safnað saman, vertu viss um að setja upp og nota nauðsynlega hleðslutæki: sass-loader , postcss-loader með Autoprefixer . Með lágmarksuppsetningu ætti stillingar vefpakkans að innihalda þessa reglu eða svipað:
...
{
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
}]
},
...
Flytur inn samsett CSS
Að öðrum kosti geturðu notað tilbúið CSS Bootstrap með því einfaldlega að bæta þessari línu við inngangspunkt verkefnisins þíns:
import 'bootstrap/dist/css/bootstrap.min.css';
Í þessu tilfelli geturðu notað núverandi reglu fyrir css
án sérstakra breytinga á webpack config, nema þú þarft ekki sass-loader
bara style-loader og css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...