在 Laravel 中使用 npm 安装 flatpickr 时如何加载 CSS？答案

【问题标题】：How do I load the CSS for flatpickr when I use npm to install it in Laravel?在 Laravel 中使用 npm 安装 flatpickr 时如何加载 CSS？
【发布时间】：2019-07-28 21:21:15
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

标签： css laravel npm import flatpickr

【解决方案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

【讨论】：

有趣。我不知道。太感谢了。那么这是 Node 模块的常见模式吗？也就是说，在node_modules 包目录中，通常是否有一个dist 目录包含所有的CSS 等？另外，CSS 和 Stylus 文件有什么区别？ Stylus 和 Sass/Less 一样吗？另外，import 语句中的波浪号 (~) 是什么意思？最后，我正在使用 Vue-Multiselect (vue-multiselect.js.org)。获取 CSS 的模式会相似吗？再次感谢。
~ 有点像快捷方式，但会在一些常见位置查找。一个是项目根目录中的node_modules。
非常有帮助。非常感谢。

【解决方案2】：

现在 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 文件中的任何其他内容之前。

【讨论】：