Question

基于此answer，我可以使用Laravel Mix将AlertifyJS成功地集成到我的Laravel项目中。

问题是CSS文件无法正常工作或被Alertify检测到。如果我在app.css文件中搜索单词“ alertify”，则会找到它。但是，为什么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.scss中，我添加了：

// 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"/>

即使Laravel组合中包含alertify.js，它也能正常工作。

外面有人知道如何解决此问题吗？我想念什么？

解决方法

我发现了如何手动导入这些CSS文件。

根据Laravel official docs，我继续并直接下载CSS文件：

我将它们另存为resources/css/alertify/

alertify.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

差不多了。

如何将AlertifyJS（js和CSS文件）与Laravel Mix集成

0 个答案: