Webpack
Ianaro ny fomba fampidirana Bootstrap amin'ny tetikasanao amin'ny fampiasana Webpack.
Fametrahana Bootstrap
Mametraka bootstrap ho modely Node.js mampiasa npm.
Manafatra JavaScript
Ampidiro ny JavaScript an'ny Bootstrap amin'ny fampidirana ity andalana ity amin'ny idiran'ny fampiharana anao (matetika index.js
na app.js
):
import 'bootstrap';
Raha tsy izany, azonao atao ny manafatra plugins tsirairay raha ilaina:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap dia miankina amin'ny jQuery sy Popper , izay voafaritra ao amin'ny peerDependencies
fananana; Midika izany fa tsy maintsy azonao antoka fa ampidirinao amin'ny package.json
fampiasanao izy roa npm install --save jquery popper.js
.
Manafatra Styles
Manafatra Sass precompiled
Raha te hankafy ny fahafahan'ny Bootstrap feno sy amboary izany amin'ny filanao, ampiasao ny rakitra loharano ho ampahany amin'ny fizotran'ny tetikasanao.
Voalohany, mamorona anao manokana _custom.scss
ary ampiasao izany hanesorana ireo fari-pahaiza-manao namboarina . Avy eo, ampiasao ny rakitra Sass lehibenao hanafatra ny fari-piainanao manokana, arahin'ny Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Mba hanangonana ny Bootstrap dia ataovy azo antoka fa mametraka sy mampiasa ireo loader ilaina ianao: sass-loader , postcss-loader miaraka amin'ny Autoprefixer . Miaraka amin'ny fanamboarana kely indrindra, ny config webpack-nao dia tokony ahitana ity fitsipika ity na mitovitovy:
...
{
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
}]
},
...
Manafatra CSS natambatra
Raha tsy izany, azonao atao ny mampiasa CSS efa vonona hampiasaina amin'ny Bootstrap amin'ny fampidirana fotsiny ity andalana ity amin'ny teboka fidirana amin'ny tetikasanao:
import 'bootstrap/dist/css/bootstrap.min.css';
Amin'ity tranga ity dia azonao atao ny mampiasa ny fitsipika efa misy anao css
raha tsy misy fanovana manokana amin'ny config webpack, afa-tsy ianao tsy mila sass-loader
style -loader sy css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...