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

2023年8月17日 290次阅读

我有一个Laravel项目,我正在尝试使用flatpickr,如下页所示：

https://flatpickr.js.org/getting-started/

我能够通过npm i flatpickr –save安装flatpickr并将其正确导入JS代码并通过“flatpickr”中的import flatpickr使用它,但我的问题是：我如何将CSS加入到项目中？

我最终使用上面flatpickr docs链接中引用的以下HTML链接标记：

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

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

也就是说,当你使用npm来安装包并将其导入JS时,是否有类似的CSS,或者我们是否需要使用传统的链接标记包含CSS,这是我们唯一的选择？

我无法在文档中找到任何内容,也无法通过谷歌查找如何执行此操作,所以我真的很想知道.谢谢.

最佳答案 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’;

至

资源/上海社会科学院/ app.scss

并运行

npm run dev

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

点赞