Apo wẹẹbu
Kọ ẹkọ bi o ṣe le ṣafikun Bootstrap sinu iṣẹ akanṣe rẹ nipa lilo apo wẹẹbu.
Fifi Bootstrap sori ẹrọ
Fi sori ẹrọ bootstrap bi Node.js module nipa lilo npm.
Gbigbe JavaScript wọle
Ṣe agbewọle Bootstrap JavaScript nipa fifi laini yii kun si aaye titẹsi app rẹ (nigbagbogbo index.js
tabi app.js
):
import 'bootstrap';
Ni omiiran, o le gbe awọn afikun wọle lọkọọkan bi o ṣe nilo:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap da lori jQuery ati Popper , eyi ti o wa ni pato ninu peerDependencies
ohun ini; eyi tumọ si pe iwọ yoo ni lati rii daju pe o fi awọn mejeeji kun si package.json
lilo rẹ npm install --save jquery popper.js
.
Akowọle Styles
Ṣe agbewọle Sass ti a ti ṣajọ tẹlẹ
Lati gbadun agbara ni kikun ti Bootstrap ati ṣe akanṣe rẹ si awọn iwulo rẹ, lo awọn faili orisun gẹgẹbi apakan ti ilana iṣakojọpọ iṣẹ akanṣe rẹ.
Ni akọkọ, ṣẹda tirẹ _custom.scss
ki o lo lati bori awọn oniyipada aṣa ti a ṣe sinu rẹ . Lẹhinna, lo faili Sass akọkọ rẹ lati gbe awọn oniyipada aṣa rẹ wọle, atẹle nipasẹ Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Fun Bootstrap lati ṣajọ, rii daju pe o fi sori ẹrọ ati lo awọn agberu ti a beere: sass-loader , postcss-loader pẹlu Autoprefixer . Pẹlu iṣeto ti o kere ju, atunto apo-iwe wẹẹbu rẹ yẹ ki o pẹlu ofin yii tabi iru:
...
{
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
}]
},
...
Gbigbawọle CSS Iṣakojọpọ
Ni omiiran, o le lo CSS ti o ṣetan lati lo Bootstrap nipa fifi laini yii kun si aaye titẹsi iṣẹ akanṣe rẹ:
import 'bootstrap/dist/css/bootstrap.min.css';
Ni ọran yii o le lo ofin ti o wa tẹlẹ css
laisi awọn iyipada pataki si atunto apo-iwe wẹẹbu, ayafi ti o ko ba nilo sass-loader
agberu ara ati css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...