Akwatin gidan yanar gizo
Koyi yadda ake haɗa Bootstrap a cikin aikin ku ta amfani da fakitin Yanar Gizo.
Sanya Bootstrap
Sanya bootstrap azaman ƙirar Node.js ta amfani da npm.
Ana shigo da JavaScript
Shigo da Bootstrap's JavaScript ta ƙara wannan layin zuwa wurin shigarwar ka (yawanci index.js
ko app.js
):
import 'bootstrap';
A madadin, zaku iya shigo da plugins daban-daban kamar yadda ake buƙata:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap ya dogara da jQuery da Popper , waɗanda aka ƙayyade a cikin peerDependencies
dukiya; wannan yana nufin cewa dole ne ku tabbatar kun ƙara duka biyun zuwa ga package.json
amfani da ku npm install --save jquery popper.js
.
Ana shigo da Salon
Ana shigo da Sass da aka riga aka tattara
Don jin daɗin cikakkiyar damar Bootstrap da keɓance shi ga buƙatunku, yi amfani da fayilolin tushen azaman wani ɓangare na tsarin haɗa aikin ku.
Da farko, ƙirƙiri naku _custom.scss
kuma yi amfani da shi don ƙetare ginanniyar masu canji na al'ada . Sannan, yi amfani da babban fayil ɗin Sass ɗinku don shigo da masu canjin al'ada, sannan Bootstrap ya biyo baya:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Don Bootstrap don haɗawa, tabbatar da shigar da amfani da masu ɗaukar kaya da ake buƙata: sass-loader , mai ɗaukar hoto tare da Autoprefixer . Tare da ƙaramin saiti, saitin fakitin gidan yanar gizonku yakamata ya haɗa da wannan doka ko makamancin haka:
...
{
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
}]
},
...
Ana Shigo da Haɗaɗɗen CSS
A madadin, zaku iya amfani da Bootstrap na shirye-shiryen amfani da CSS ta hanyar ƙara wannan layi kawai zuwa wurin shigarwar aikin ku:
import 'bootstrap/dist/css/bootstrap.min.css';
A wannan yanayin zaku iya amfani da ƙa'idar da kuke da ita don css
ba tare da wani gyare-gyare na musamman ga saitin fakitin gidan yanar gizo ba, sai dai ba kwa buƙatar sass-loader
kawai mai ɗaukar hoto da css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...