Nyatakakadzraɖoƒe ƒe agbalẽvi
Srɔ̃ alesi nàde Bootstrap wò dɔa me to Webpack 3 zazã me.
De bootstrap abe Node.js module ene to npm zazã me.
Tsɔ Bootstrap ƒe JavaScript la va to fli sia tsɔtsɔ kpe ɖe wò dɔwɔnua ƒe teƒe si nàge ɖo ŋu (zi geɖe la, index.jsalo app.js):
import 'bootstrap';Alo àte ŋu atsɔ plugins ɖekaɖeka ne ehiã:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...Bootstrap nɔ te ɖe jQuery kple Popper dzi , woɖe esiawo gɔme be peerDependencies, esia fia be ele be nàkpɔ egbɔ be yetsɔ wo ame evea siaa kpe ɖe wò package.jsonzazã npm install --save jquery popper.jsŋu .
Be nàse vivi na Bootstrap ƒe ŋutete bliboa eye nàtrɔ asi le eŋu wòasɔ ɖe wò hiahiãwo nu la, zã dzɔtsoƒe faɛlwo abe wò dɔa ƒe ƒuƒoƒo ƒe ɖoɖoa ƒe akpa aɖe ene.
Gbã la, wɔ tɔwò _custom.scsseye nàzãe atsɔ axe mɔ ɖe custom variables siwo wotu ɖe eme la nu . Emegbe, zã wò Sass faɛl vevitɔ nàtsɔ axɔ wò tɔtrɔ siwo nèwɔ ɖe ɖoɖo nu, eye nàtsɔ Bootstrap akplɔe ɖo:
@import "custom";
@import "~bootstrap/scss/bootstrap";Be Bootstrap naƒo ƒu la, kpɔ egbɔ be yede agbatsɔnu siwo hiã la eye yezã wo: sass-loader , postcss-loader kple Autoprefixer . Ne èwɔ ɖoɖo sue aɖe ko la, ele be wò webpack ƒe ɖoɖowɔɖi nade se sia alo esi sɔ kplii me:
...
{
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
}]
},
...Alo, àteŋu azã Bootstrap ƒe CSS si sɔ na zazã to fli sia tsɔtsɔ kpe ɖe wò dɔa ƒe gegeɖeƒe ŋu ko me:
import 'bootstrap/dist/css/bootstrap.min.css';Le nɔnɔme sia me la, àteŋu azã wò se si li fifia na tɔtrɔ tɔxɛ aɖeke manɔmee le webpack config ŋu, negbe ɖeko cssmèhiã style-loader kple css-loader ko o.sass-loader
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...