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

Question

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.

Gurl

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

run npm run dev

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

---

...or you could just add

@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

Keener

Interesting. I did not know that. Thank you so much. So is this a common pattern for Node modules? That is, within the node_modules package directory, is there usually a dist directory with all the CSS, etc.? Also, what's the difference between the CSS and Stylus files? Is Stylus like Sass/Less? Also, what does the tilde (~) in the import statement mean? Lastly, I'm using Vue-Multiselect (vue-multiselect.js.org). Would the pattern for getting the CSS for that be similar? Thanks again. – Gurl

~ is sort of like a shortcut, but will look in some common locations. One being node_modules in the project root. – Keener

Very helpful. Thanks a lot. – Gurl

Answer 2

Now March 2021, if using Laravel and the newer Laravel mix with npx mix and TailwindCSS, you may add flatpickr to app.css file with:

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

Note: All @import's must go before any other content in the app.css file.

Unequaled

importing the flatpickr's css solved my problem, thanks! [+1] – Bridesmaid