Webpack
Ikasi nola sartu Bootstrap zure proiektuan Webpack erabiliz.
Bootstrap instalatzen
Instalatu bootstrap Node.js modulu gisa npm erabiliz.
JavaScript inportatzen
Inportatu Bootstrap-en JavaScript lerro hau gehituz zure aplikazioaren sarrera puntuan (normalean index.js
edo app.js
):
import 'bootstrap';
Bestela, banan- banan inporta ditzakezu pluginak behar izanez gero:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap jQuery eta Popper -en araberakoa da, jabetzan zehaztuta daudenak peerDependencies
; horrek esan nahi du biak gehitzen dituzula zure package.json
erabileran ziurtatu beharko duzula npm install --save jquery popper.js
.
Estiloak inportatzea
Aurrekonpilatutako Sass inportatzea
Bootstrap-en potentzial osoaz gozatzeko eta zure beharretara pertsonalizatzeko, erabili iturburu-fitxategiak zure proiektuaren multzokatze-prozesuaren zati gisa.
Lehenik eta behin, sortu zurea _custom.scss
eta erabili aldagai pertsonalizatuak gainidazteko . Ondoren, erabili zure Sass fitxategi nagusia zure aldagai pertsonalizatuak inportatzeko, eta ondoren Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Bootstrap konpilatzeko, ziurtatu behar diren kargatzaileak instalatu eta erabiltzen dituzula: sass-loader , postcss- loader Autoprefixer . Gutxieneko konfigurazioarekin, zure webpack konfigurazioak arau hau edo antzekoa izan beharko luke:
...
{
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
}]
},
...
Konpilatutako CSS inportatzen
Bestela, Bootstrap-en erabiltzeko prest dagoen CSS erabil dezakezu lerro hau zure proiektuaren sarrera puntuan gehituta:
import 'bootstrap/dist/css/bootstrap.min.css';
Kasu honetan, lehendik duzun araua erabil dezakezu css
webpack konfigurazioan aldaketa berezirik gabe, style-loader eta css-loadersass-loader
besterik ez dituzula behar izan ezik .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...