Как интегрировать Alertify JS (файлы js и css) с Laravel Mix - PullRequest
Новая
       156

Как интегрировать Alertify JS (файлы js и css) с Laravel Mix

0 голосов
/ 07 августа 2020

На основе этого ответа я смог успешно интегрировать Alertify JS в свой Laravel проект, используя Laravel Mix.

Проблема в том, что файлы CSS не работают или не обнаруживаются системой Alertify. Если я найду слово «alerttify» в файле app.css, оно будет найдено. Но тогда почему не работает часть CSS?

В файл bootstrap.js я добавил следующее: 

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');    
    //ALERTIFY
    window.alertify = require('alertifyjs');

    require('bootstrap');
    // ... more libraries
} catch (e) {}

А внутри app.s css добавил : 

// Variables
@import 'variables';
$fa-font-path: "../webfonts";

// Bootstrap
@import '~bootstrap/scss/bootstrap';

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

//  A L E R T I F Y
@import '~alertifyjs/build/css/alertify.min.css';
@import '~alertifyjs/build/css/themes/bootstrap.min.css';

Затем я запустил npm run dev, и все прошло успешно.

Если я запустил тестовое представление со следующим скриптом: 

<script>
    $(document).ready(function () {
       alertify.success('Importing alertify in mix.');
    });
</script>

Я действительно увижу предупреждение, но только в виде обычного текста. Часть CSS не работает.

Однако, если я добавляю только CDN CSS непосредственно в виде лезвия 

{{--Alertify--}}
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/bootstrap.min.css"/>

, он работает, даже если alertify.js входит в состав Laravel mix.

Кто-нибудь знает, как это исправить? Что мне не хватает?

Обходной путь

Я узнал, как импортировать эти CSS файлы вручную.

Согласно официальным документам Laravel, Я загрузил файлы CSS напрямую:

Я сохранил их как resources/css/alertify/

  • alerttify .min. css
  • bootstrap .min. css

Затем я добавил конфигурацию микса внутри webpack.mix.js следующим образом: 

mix.styles([
    'resources/css/alertify/alertify.min.css',
    'resources/css/alertify/bootstrap.min.css'
], 'public/css/alertify.css');

После этого я запустил npm run dev

Наконец, я добавил сгенерированный alertify.css внутри требуемого вида лезвия следующим образом: 

@push('css')
    {{--Alertify--}}
    {{--
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/bootstrap.min.css"/>
    --}}
    <link href="{{ asset('css/alertify.css') }}" rel="stylesheet">
@endpush

И на этом все закончилось.

...