web-dev-qa-db-ja.com

sass bootstrap統合でグリフィコンが表示されない

このチュートリアルを使用して、プロジェクトにbootstrapを統合します。

https://laravel-news.com/2015/10/setup-bootstrap-sass-with-laravel-elixir/

これにより、cssフォルダーにapp.cssファイルが配置されます。ただし、グリフィコンを使用しようとしても表示されません。だから私はこのようにエリクサーファイルを変更しようとしました：

    elixir(function(mix) {

    mix.sass('app.scss')
        .browserify('app.js')
        .copy('node_modules/bootstrap-sass/assets/fonts', 'public/css/fonts')   

});

フォントフォルダーはpublic/css/fontsの下にコピーされますが、アイコンは表示されません。ここに何が欠けていますか？どんな手掛かり？

私のapp.cssでは、パスは正しいようです、例えば：

src: url("fonts/bootstrap/glyphicons-halflings-regular.eot");
twitter-bootstraplaravelfontssasslaravel-elixir
14
Chriz74

laravel 5.2。の新規インストールでも同じ問題が発生しました。

../build/fonts/bootstrap/glyphicons-halflings-regular.woff2

だから私はこれをgulp.jsに追加しました：

mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/','public/build/fonts/bootstrap');

その後、ターミナルで：

gulp

それは私のためにトリックをしました！

24
halfred

app.scssbefore含むbootstrap=ファイルセット変数$icon-font-path値は正しく、おそらくあなたの場合は次のようになります。

$icon-font-path: '/css/fonts/';
8
Marcin Nabiałek

これは、WindowsでLaravel 5.3で私のために働いたものです

  1. まず、NodeJSパッケージの最新バージョン（v6.7.0）を使用していることを確認してください

    URLでタブ「現在の最新機能」をクリックします https://nodejs.org/en/download/current/

  2. 実行npm install

  3. ファイルを変更しますgulpfile.js次を含む：

    elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js');
    mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/','public/fonts/bootstrap');
});

  4. Gulpを実行します。

    gulp

  5. それでおしまい。

7
Basil Musa

Laravel 5.4では、npm依存関係をインストールし、必要に応じて本番またはdevでnpmを実行します。

npm install
npm run production

Laravelが残りを行います。

4
Jithin

In Laravel 5.4私がしたことは

mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/', 'public/fonts/bootstrap');

resources/assets/sass/_variables.scssまたはapp.scss

$icon-font-path: '/fonts/bootstrap/';
3
Kzy

Laravel 5.3ビルドの削除

mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/', 'public/fonts/bootstrap');

gulpを実行する

1
cmac

Laravel 5.4

これ 答えは私の問題を正確に解決しなかったが、正しい方向を示した。これは私の解決策であり、アプリケーションのURLを定義している場合（Homesteadまたは他のVM/Vagrant/etcを使用している場合、またはアプリケーションにvhostおよびhostsファイルを設定している場合）、またはあなたが私のような場合、そして、lamp stack/xampp/wamp/mapm/etcをインストールし、Apache htdocs sbfolderから開発を行っています。

最初に追加する必要があります
mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/', 'public/fonts/');
あなたのwebpack.mix.jsファイルの末尾。

次に開くresources/assets/sass/_variable.scssおよび編集$icon-font-path値。

ホームステッドを使用せず、アプリケーションのdev urlを定義していないランプスタックを使用している場合（vhostを設定せず、hostsファイルを変更しなかった）、代わりにサブフォルダーとしてアクセスする場合localhost/YOUR_APP/public/その後、アイコンのフォントパスを次のように設定する必要があります
$icon-font-path: "/YOUR_APP/public/fonts/";

アプリケーションのURLを設定している場合は、次のようにアイコンフォントを設定するだけです。
$icon-font-path: "/public/fonts/"およびCSSファイルを再コンパイルします。 最初に設定されていない場合は、アプリケーションをプロダクションにプッシュする前にこれに変更する必要があります!!!

Cssおよびjsファイルを再コンパイルする方法がわからない場合は、次の手順に従ってください。
1。アプリケーションのルートに移動し、そこでbashを実行します（git bash、cmdなど）
2。 npm install
3。 npm run-script production（利用可能な他のフラグがありますが、jsとcssを縮小するため、生産を優先します）
4。 jsとcssを再コンパイルしたことを祝福します

1
Bosko Stupar

Laravel 5.4を使用して同じ問題が発生しましたnpm installおよびnpm run dev。

これら2つのコマンドが実行されると、フォント（およびグリフィコン）が/ publicディレクトリに正しくコピーされました。 Sassやビルドファイルを編集する必要はありませんでした。

1
Votemike

Webpack.config.jsセットで：

publicPath: '../'

Mix.resourceRootの代わりに

0
Kashif Saleem

Bootstrap4にはアイコンはもう付属していません bootstrap icons

たとえば、代わりにFont Awesomeを使用できます。

Webpack.mix.js構成をビルドします。

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Font Awesomeをインストールします。

npm install @fortawesome/fontawesome-free

/resources/sass/app.scssで、1つ以上のスタイルをインポートします。

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

コンパイルします。

npm run production
or
npm run dev

最後に、レイアウトで新しいCSSファイルを参照します。

<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
0
Ian Hildebrand

ブレードテンプレートでelixir（）ヘルパーを使用している場合は、フォントファイルを/ public/buildに配置する必要があります。その結果、/ public/build/fonts、「fonts」フォルダーにはすべてのフォントファイルが含まれます。

0
cajuc
  • ブラウザの開発者ツールを調べて、パスを監視します。
  • 私の場合、それはpublic/fonts/glyphicons-halflings-regular.ttfでした。これらのフォントを手動でダウンロードし、そこに配置しました。
  • そしてそれはうまくいきました！
0
Dev