Pakiet internetowy
Dowiedz się, jak włączyć Bootstrap do swojego projektu za pomocą Webpack 3.
Zainstaluj bootstrap jako moduł Node.js przy użyciu npm.
Zaimportuj kod JavaScript Bootstrap, dodając ten wiersz do punktu wejścia aplikacji (zwykle index.js
lub app.js
):
Alternatywnie możesz importować wtyczki pojedynczo w razie potrzeby:
Bootstrap jest zależny od jQuery i Poppera , są one zdefiniowane jako peerDependencies
, co oznacza , że będziesz musiał dodać oba z nich do swojego package.json
użytku npm install --save jquery popper.js
.
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:
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łę:
Alternatywnie możesz użyć gotowego do użycia kodu CSS Bootstrap, po prostu dodając ten wiersz do punktu wejścia projektu:
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 .