SweetAlert в Laravel 5.5 с использованием laravel-mix не работает должным образом с css

Я пытаюсь использовать SweetAlert с Laravel 5.5 с использованием Larvel Mix, но не работает должным образом

webpack.mix.js

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

пакет.json

 "devDependencies": {
        ...
        "bootstrap-sass": "^3.3.7",
        ...
        "jquery": "^3.2",
        "laravel-mix": "^1.0",
        "sweetalert": "^2.0.8",

ресурс/активы/sass/app.css

// Sweet Alert
@import url("https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css");

когда я выполняю компиляцию npm run dev без ошибок.

Но когда я использую этот метод, оповещения отображаются без стиля CSS SweetAlert.


laravel-5 laravel-mix sweetalert2
person abkrim    schedule 03.12.2017    source источник

Ответы (3)


arrow_upward
1
arrow_downward

После

npm install sweetalert2 --save

вы должны сделать, как показано ниже в вашем app.js:

window.Swal = require('sweetalert2');

Or

@import "~sweetalert2";
person Abolfazl Mohajeri    schedule 26.07.2019

arrow_upward
0
arrow_downward

В вашем файле resources/assets/sass/app.scss

Вместо этого используйте эту строку

@import "~sweetalert2";

То, что вы делали (импорт CSS из CDN), вообще не имеет ничего общего с npm.

person Ru Chern Chong    schedule 14.12.2017
comment
Спасибо, но вопрос очень старый. Сейчас я запускаю Laravel 5.7, но спасибо. @ru-chem-chong - person abkrim; 25.01.2019
comment
Я не понимаю, как Laravel 5.5 и Laravel 5.7 заставляют это работать по-разному. - person Ru Chern Chong; 27.01.2019

arrow_upward
0
arrow_downward

Шаг 1: npm install sweetalert --save запустите эту команду в своем терминале/cmd.

Шаг 2. Просто импортируйте файл resources/js/app.js в приложение import swal from 'sweetalert';.

введите здесь описание изображения

person Golam Sorwar    schedule 24.01.2019
comment
Кажется, что это должно работать для меня, но это не так. Он всегда говорит, что Swal не определен. Однако, если я вместо этого поставлю window.Swal = require('sweetalert2'), это сработает. Что мне не хватает? - person Geoff Maddock; 26.11.2019
comment
импортировать swal из 'sweetalert'; window.swal = swal Теперь попробуйте этот способ - person Golam Sorwar; 27.12.2019