Pecyn gwe
Dysgwch sut i gynnwys Bootstrap yn eich prosiect gan ddefnyddio Webpack.
Gosod Bootstrap
Gosodwch bootstrap fel modiwl Node.js gan ddefnyddio npm.
Mewnforio JavaScript
Mewnforio JavaScript Bootstrap trwy ychwanegu'r llinell hon at bwynt mynediad eich app (fel arfer index.js
neu app.js
):
import 'bootstrap';
Fel arall, gallwch fewnforio ategion yn unigol yn ôl yr angen:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Mae Bootstrap yn dibynnu ar jQuery a Popper , a nodir yn yr peerDependencies
eiddo; mae hyn yn golygu y bydd yn rhaid i chi wneud yn siŵr eich bod yn ychwanegu'r ddau at eich package.json
defnydd npm install --save jquery popper.js
.
Mewnforio Arddulliau
Mewnforio Sass wedi'i Rag-grynhoi
I fwynhau potensial llawn Bootstrap a'i addasu i'ch anghenion, defnyddiwch y ffeiliau ffynhonnell fel rhan o broses bwndelu eich prosiect.
Yn gyntaf, crëwch eich un eich hun _custom.scss
a'i ddefnyddio i ddiystyru'r newidynnau arferiad adeiledig . Yna, defnyddiwch eich prif ffeil Sass i fewnforio eich newidynnau arferol, ac yna Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Er mwyn i Bootstrap ei lunio, gwnewch yn siŵr eich bod yn gosod ac yn defnyddio'r llwythwyr gofynnol: sass-loader , postcss-loader gydag Autoprefixer . Gydag ychydig iawn o setup, dylai eich ffurfwedd pecyn gwe gynnwys y rheol hon neu debyg:
...
{
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
}]
},
...
Mewnforio CSS Compiled
Fel arall, gallwch ddefnyddio CSS parod Bootstrap i'w ddefnyddio trwy ychwanegu'r llinell hon at bwynt mynediad eich prosiect:
import 'bootstrap/dist/css/bootstrap.min.css';
Yn yr achos hwn gallwch ddefnyddio'ch rheol bresennol ar gyfer css
heb unrhyw addasiadau arbennig i gyfluniad pecyn gwe, ac eithrio nad oes arnoch angen sass-loader
dim ond style-loader a css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...