Loading CSS with Webpack/Yarn

[niedfelj]

Could you document/explain how to load the CSS properly using yarn/npm and webpack?

[desandro]

Thanks for reporting this issue.

Unfortunately, I do not have much expertise working with Webpack. An initial web search yields a couple results:

• Webpack Loaders, CSS and Style Loaders
• css-loader

Please chime if you can provide some guidance here 🙏

[niedfelj]

I was able to get it to work using this in my .scss

@import "~flickity/css/flickity.css";

It would be great if it could just use the package.json style tag that you have setup or else if you could make it a dependency in your .js, but I guess that would only work if they were using webpack with the right loaders?

[maxcr]

import it inside your js unless you want webpack to spit out an accompanying css/js file. (js with css embedded)

[graygilmore]

If anyone else stumbles across this I was able to do this in JS by:

import 'flickity/dist/flickity.min.css';
import Flickity from 'flickity';

// do Flickity things
// new Flickity(el, options);

[maxcr]

There was but its lost to me now. It had something to do with pathing issues as Webpack was originally created on a Windows OS some some file paths had to be aliased if you're on Linux or Mac like I was.

On Mon, Feb 10, 2020 at 5:22 AM Drew Scott [email protected] wrote:

@niedfelj https://github.com/niedfelj @desandro https://github.com/desandro @graygilmore https://github.com/graygilmore is this still the right way to do it in 2020? Rails now uses Webpack by default, not sure if it did it back then as well, but there's gotta be a better way?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/metafizzy/flickity/issues/754?email_source=notifications&email_token=AAJNDRWMU75CV7JFEMDI2KTRCFBGTA5CNFSM4E5LEVYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOELIJ2YI#issuecomment-584097121, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJNDRQWVDZR42WDTDXIYK3RCFBGTANCNFSM4E5LEVYA .

[anon987654321]

@niedfelj @maxcr @graygilmore are you guys still using Flickity with Webpack/Yarn? If so did you ever encounter this issue?

https://github.com/metafizzy/flickity/issues/1077

Thanks!