Ggtcf

I've got a Laravel project, and am trying to use flatpickr in it as per the following page:
https://flatpickr.js.org/getting-started/

I was able to install flatpickr via npm i flatpickr --save and properly import it into the JS code and use it via import flatpickr from "flatpickr";, but my question is: How do I get the CSS into the project as well?

I ended up using the following HTML link tag referenced in the flatpickr docs link above:

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

But I'm wondering if there is a better way to get the CSS for flatpickr into my project.

That is, when you use npm to install a package and import it into JS, is there something similar for the CSS, or are we required to include the CSS using a traditional link tag and that's our only option?

I couldn't find anything in the docs or via Google on how to do this, so I'm really left wondering. Thanks.

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');

run npm run dev

results in js/app.js and css/flatpickr.css

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

to

resources/sass/app.scss

and run

npm run dev

Then you get all of your css (Bootstrap/flatpickr) in one file public/css/app.css