当我使用 npm 在 Laravel 中安装它时,如何为 flatpickr 加载 CSS?

How do I load the CSS for flatpickr when I use npm to install it in Laravel?

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

我能够通过 npm i flatpickr --save 安装 flatpickr 并将其正确导入 JS 代码并通过 import flatpickr from "flatpickr"; 使用它,但我的问题是:我如何获得 CSS也进入项目?

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

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

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

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

我无法在文档中或通过 Google 找到有关如何执行此操作的任何内容,所以我真的很疑惑。谢谢。

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.jscss/flatpickr.css


...或者您可以添加

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

resources/sass/app.scss

和运行

npm run dev

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

现在 2021 年 3 月,如果使用 Laravel 和较新的 Laravel 与 npx mix 和 TailwindCSS 混合使用,您可以将 flatpickr 添加到 app.css 文件:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'flatpickr/dist/flatpickr.css';

注意:所有@import 必须在 app.css 文件中的任何其他内容之前。