当我在 Laravel 中使用 npm 安装 flatpickr 时，如何加载其 CSS？

Question

我有一个 Laravel 项目，并尝试按照以下页面在其中使用 flatpickr： https:
//flatpickr.js.org/getting-started/

我能够通过安装 flatpickrnpm i flatpickr --save并将其正确导入到 JS 代码中并通过 via 使用它import flatpickr from "flatpickr";，但我的问题是：如何将 CSS 也导入到项目中？

我最终使用了link上面的 flatpickr 文档链接中引用的以下 HTML 标签：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

但我想知道是否有更好的方法将 flatpickr 的 CSS 放入我的项目中。

也就是说，当你使用npm安装包并将其导入到JS中时，CSS是否有类似的东西，或者我们是否需要使用传统link标签来包含CSS，这是我们唯一的选择？

我在文档中或通过谷歌找不到任何关于如何执行此操作的信息，所以我真的很想知道。谢谢。

Answer 1

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js(['resources/js/app.js', 'node_modules/flatpickr/dist/flatpickr.js'], 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .stylus('node_modules/flatpickr/src/style/flatpickr.styl', 'public/css');

跑步npm run dev

结果是js/app.js和css/flatpickr.css

...或者你可以添加

@import '~flatpickr/dist/flatpickr.css';

到

resources/sass/app.scss

并运行

npm run dev

然后你将所有 css (Bootstrap/flatpickr) 放在一个文件中public/css/app.css