Pakiety internetowe i pakiety
Dowiedz się, jak włączyć Bootstrap do swojego projektu za pomocą Webpack lub innych pakietów.
Instalowanie Bootstrapa
Zainstaluj bootstrap jako moduł Node.js przy użyciu npm.
Importowanie JavaScript
Zaimportuj kod JavaScript Bootstrap, dodając ten wiersz do punktu wejścia aplikacji (zwykle index.js
lub app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
Alternatywnie, jeśli potrzebujesz tylko kilku naszych wtyczek, możesz zaimportować wtyczki pojedynczo w razie potrzeby:
import Alert from 'bootstrap/js/dist/alert';
...
Bootstrap zależy od Poppera , który jest określony we peerDependencies
właściwości. Oznacza to, że będziesz musiał dodać go do swojego package.json
użytku npm install @popperjs/core
.
Importowanie stylów
Importowanie prekompilowanego Sassa
Aby w pełni wykorzystać potencjał Bootstrap i dostosować go do swoich potrzeb, użyj plików źródłowych jako części procesu bundlingu projektu.
Najpierw utwórz własne _custom.scss
i użyj go do zastąpienia wbudowanych zmiennych niestandardowych . Następnie użyj głównego pliku Sass, aby zaimportować zmienne niestandardowe, a następnie Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Aby Bootstrap się skompilował, upewnij się, że zainstalowałeś i używasz wymaganych programów ładujących: sass-loader , postcss-loader z Autoprefixer . Przy minimalnej konfiguracji konfiguracja pakietu internetowego powinna zawierać tę lub podobną regułę:
// ...
{
test: /\.(scss)$/,
use: [{
// inject CSS to page
loader: 'style-loader'
}, {
// translates CSS into CommonJS modules
loader: 'css-loader'
}, {
// Run postcss actions
loader: 'postcss-loader',
options: {
// `postcssOptions` is needed for postcss 8.x;
// if you use postcss 7.x skip the key
postcssOptions: {
// postcss plugins, can be exported to postcss.config.js
plugins: function () {
return [
require('autoprefixer')
];
}
}
}
}, {
// compiles Sass to CSS
loader: 'sass-loader'
}]
}
// ...
Importowanie skompilowanego CSS
Alternatywnie możesz użyć gotowego do użycia kodu CSS Bootstrap, po prostu dodając ten wiersz do punktu wejścia projektu:
import 'bootstrap/dist/css/bootstrap.min.css';
W tym przypadku możesz użyć swojej istniejącej reguły css
bez żadnych specjalnych modyfikacji konfiguracji webpacka, z wyjątkiem tego, że nie potrzebujesz sass-loader
tylko style-loader i css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...