Wɛbsaet a wɔde ahyɛ mu
Sua sɛnea wode Bootstrap bɛka wo project no ho denam Webpack 3 so.
Install bootstrap sɛ Node.js module a wode npm di dwuma.
Fa Bootstrap JavaScript no ba denam saa line yi a wode bɛka wo app no entry point ho (mpɛn pii no index.jsanaa app.js):
import 'bootstrap';Sɛnea ɛbɛyɛ a, wubetumi de plugins aba ankorankoro sɛnea ɛho hia:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...Bootstrap gyina jQuery ne Popper so , wɔkyerɛkyerɛ eyinom mu sɛ peerDependencies, eyi kyerɛ sɛ ɛsɛ sɛ wohwɛ hu sɛ wode abien no nyinaa bɛka wo package.jsondwumadie npm install --save jquery popper.jsho .
Sɛ wopɛ sɛ wonya Bootstrap tumi nyinaa mu anigye na wosakra no ma ɛne w’ahiade hyia a, fa source files no di dwuma sɛ wo project no bundling nhyehyɛe no fã.
Nea edi kan no, yɛ w’ankasa de _custom.scssna fa di dwuma fa built-in custom variables no so . Afei, fa wo Sass fael titiriw no fa wo custom variables no ba, na Bootstrap di akyi:
@import "custom";
@import "~bootstrap/scss/bootstrap";Sɛ Bootstrap bɛboaboa ano a, hwɛ hu sɛ wobɛhyehyɛ na wode loaders a ɛho hia no adi dwuma: sass-loader , postcss-loader a Autoprefixer ka ho. Sɛ wowɔ nhyehyɛe ketewaa bi a, ɛsɛ sɛ wo webpack config no de mmara yi anaa nea ɛte saa ka ho:
...
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
...Sɛnea ɛbɛyɛ a, wubetumi de Bootstrap CSS a wɔasiesie sɛ wode bedi dwuma no adi dwuma denam saa nkyerɛwde yi a wode bɛka wo dwumadi no hyɛn gyinabea ho ara kwa no so:
import 'bootstrap/dist/css/bootstrap.min.css';Wɔ saa tebea yi mu no wubetumi de wo mmara a ɛwɔ hɔ dedaw no adi dwuma ama a nsakrae titiriw biara nni mu wɔ webpack config mu, gye sɛ csswunhia style-loader ne css-loader kɛkɛ .sass-loader
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...