web-dev-qa-db-ja.com

bootstrap 4 in Laravel 5.4？

bootstrapアプリでnpmを使用してlaravel 4をインストールしました。しかし、bootstrap 3はbootstrap 4.ではなく、背後で動作していると思います。
コマンドの使用：

    npmインストール

私は何かすることを残しましたか？または、手動でbootstrapをasset/sass/app.scssファイルなどにインポートする必要がありますか？

twitter-bootstraplaravellaravel-5.4
11
unreleased

リンクを手動でbootstrap from resources/assets/sass/app.scss。この行が表示されます

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

と置換する

@import "node_modules/bootstrap/scss/bootstrap";
17
EddyTheDove

新規または空のLaravelプロジェクトでフローを実行します。

  • _package.json_からbootstrapエントリを削除し、_"bootstrap": "4.0.0-alpha.6"_に置き換えます。
  • _resources/assets/sass/app.scss_で、commentはimportのvariablesを出力します。
  • bootstrapのパスを_@import "node_modules/bootstrap/scss/bootstrap.scss";_に変更します

  • _resources/assets/js/bootstrap.js_で、require('bootsrap-sass');を探し、require('bootstrap');に変更します

  • _webpack.mix.js_を編集して、javascriptを取り込みます。

JavaScript

_mix.js([
    'node_modules/jquery/dist/jquery.min.js',
    'node_modules/bootstrap/dist/js/bootstrap.js',
    'resources/assets/js/app.js'], 'public/js');
mix.sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/admin.scss', 'public/css/admin'); /* If you want to make admin css file. */
_

  • _$ npm install_を実行します

  • bootstrapおよびjqueryが正しくインストールされていることを_node_modules_フォルダーで確認してください。インストールしない場合は、手動でインストールしてください。

  • Bootstrap4の場合_$ npm install [email protected]_

  • Jqueryの場合_$ npm install jquery_

すべてうまくいけば、_npm run dev_を実行できるはずです。

注：_tether.js_が必要な場合は、cdnを使用するか、手動でインストールします。 tooltipには_bootstrap@4_が_tether.js_を必要としたためです。

ソース

10
Rahul

@import "variables";のresources/assets/sass/app.scss行をコメントアウトする必要があります

インポートディレクティブは2回呼び出されます。1回はapp.scssで、次にインストールディレクトリのbootstrap.scssファイルで

1
Lowinput