Глификоны, не показывающие с интеграцией сасс-бутстрапа

Я использовал этот учебник для интеграции бутстрапа в свой проект:

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

Здесь размещается файл app.css в папке css. Однако, если я пытаюсь использовать глификоны, они не появляются. Поэтому я попытался изменить файл elixir следующим образом:

    elixir(function(mix) {

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

});

Папка шрифтов копируется под общедоступными /css/fonts, но пока не отображается значок. Что мне здесь не хватает? Любая подсказка?

в моем app.css путь кажется правильным, например:

src: url("fonts/bootstrap/glyphicons-halflings-regular.eot");

ОТВЕТЫ

Ответ 1

У меня была такая же проблема со свежей установкой 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

Это помогло!

Ответ 2

В app.scss перед следует указать значение переменной $icon-font-path для начальной загрузки файла boottrap, возможно, в вашем случае это должно быть:

$icon-font-path: '/css/fonts/';

Ответ 3

Это то, что сработало для меня в Laravel 5.3 на Windows

  • Сначала убедитесь, что вы используете последнюю версию пакета NodeJS (v6.7.0)

    Нажмите вкладку "Текущие новейшие функции" по URL https://nodejs.org/en/download/current/

  • Выполнить npm install

  • Измените файл gulpfile.js, чтобы он содержал следующее:

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

  • Запустите gulp:

    gulp

  • Вот оно.

Ответ 4

В Laravel 5.4 просто установите зависимости npm и запустите npm в процессе производства или dev по мере необходимости.

npm install
npm run production

Laravel сделает все остальное.

Ответ 5

В 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/';

Ответ 6

Laravel 5.3 удалить сборку

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

запустить gulp

Ответ 7

У меня была такая же проблема с использованием Laravel 5.4. Оказывается, я не запускал npm install и npm run dev.

Как только эти две команды были запущены, шрифты (и глификоны) были правильно скопированы в каталог /public. Не нужно было редактировать любые файлы sass или build.

Ответ 8

Для Laravel 5.4

Этот ответ не совсем решил мою проблему, но он указал мне в правильном направлении. Это мое решение, и оно охватывает оба варианта, если вы определили URL-адрес для своего приложения (используя усадьбу или другую VM/Vagrant/и т.д. Или если вы установили файл vhost и hosts для своего приложения) или, если вы похожи на меня, и установили стек лампы /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-адрес для своего приложения, вам просто нужно установить значок шрифта paht, например, $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

Ответ 9

Если вы используете помощник elixir() в ваших шаблонах кликов, вы должны поместить ваши файлы шрифтов в /public/build. В результате /public/build/fonts папка "fonts" содержит все файлы шрифтов.

Ответ 10

  • Посмотрите на инструменты разработчика вашего браузера, отслеживая путь.
  • В моем случае это были общедоступные /fonts/glyphicons -hallings-regular.ttf Я загрузил эти шрифты, вручную разместив их там.
  • И это сработало!

Ответ 11

В наборе webpack.config.js:

publicPath: '../'

Вместо Mix.resourceRoot

Ответ 12

Bootstrap4 больше не поставляется с иконками

вместо этого вы можете использовать Font Awesome, например.

Создайте свою конфигурацию webpack.mix.js.

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

Установите шрифт Awesome.

npm install @fortawesome/fontawesome-free

В /resources/sass/app.scss импортируйте один или несколько стилей.

@import '[email protected]/fontawesome-free/scss/fontawesome';
@import '[email protected]/fontawesome-free/scss/regular';
@import '[email protected]/fontawesome-free/scss/solid';
@import '[email protected]/fontawesome-free/scss/brands';

сейчас компилируем.

npm run production
or
npm run dev

Наконец, ссылка на ваш новый файл CSS в макете.

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

Ответ 13

Обновленный ответ, я реализовал это сейчас гораздо лучше, подобно верхнему ответу. В app.scss:

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

/* FONT-AWESOME */
$fa-font-path: "../../fonts";
@import "node_modules/font-awesome/scss/font-awesome";

Ответ 14

Попробуйте что-то вроде:

var gulp = require('gulp');

gulp.task('fonts', function() {
   gulp.src('.node_modules/bootstrap-sass/assets/fonts/bootstrap/fonts/*.{ttf,woff,eof,svg,woff2}')
   .pipe(gulp.dest('public/css/fonts'));
});

а затем добавьте

mix
//other scripts
.task('fonts')