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.

keyboardSmasher · Accepted Answer · 2019-03-07 06:19:49Z

6

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

edited Mar 7, 2019 at 6:19

answered Mar 7, 2019 at 5:43

keyboardSmasher

2,83122 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

HartleySan Over a year ago

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.

keyboardSmasher Over a year ago

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

HartleySan Over a year ago

Very helpful. Thanks a lot.

Out of Control · Accepted Answer · 2021-03-04 21:27:00Z

6

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.

answered Mar 4, 2021 at 21:27

Out of Control

5001 gold badge7 silver badges22 bronze badges

1 Comment

kapitan Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related