Pacchetto Web
Scopri come includere Bootstrap nel tuo progetto utilizzando Webpack.
Installazione di Bootstrap
Installa bootstrap come modulo Node.js usando npm.
Importazione di JavaScript
Importa JavaScript di Bootstrap aggiungendo questa riga al punto di ingresso della tua app (di solito index.js
o app.js
):
import 'bootstrap';
In alternativa, puoi importare i plugin individualmente secondo necessità:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap dipende da jQuery e Popper , che sono specificati nella peerDependencies
proprietà; questo significa che dovrai assicurarti di aggiungerli entrambi al tuo package.json
utilizzo npm install --save jquery popper.js
.
Importazione di stili
Importazione di Sass
Per sfruttare appieno il potenziale di Bootstrap e personalizzarlo in base alle tue esigenze, utilizza i file di origine come parte del processo di raggruppamento del tuo progetto.
Innanzitutto, creane uno tuo _custom.scss
e usalo per sovrascrivere le variabili personalizzate integrate . Quindi, usa il tuo file Sass principale per importare le tue variabili personalizzate, seguito da Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Per la compilazione di Bootstrap, assicurati di installare e utilizzare i caricatori richiesti: sass-loader , postcss-loader con Autoprefixer . Con una configurazione minima, la configurazione del tuo webpack dovrebbe includere questa regola o simili:
...
{
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
}]
},
...
Importazione di CSS compilati
In alternativa, puoi utilizzare il CSS pronto all'uso di Bootstrap semplicemente aggiungendo questa riga al punto di ingresso del tuo progetto:
import 'bootstrap/dist/css/bootstrap.min.css';
In questo caso puoi utilizzare la tua regola esistente css
senza alcuna modifica speciale alla configurazione del webpack, tranne per il fatto che non hai sass-loader
solo bisogno di style-loader e css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...