search

naver / egjs-flicking

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
https://naver.github.io/egjs-flicking/
MIT License
2.74k stars 128 forks source link

Nuxt generate target static does not include flicking css defined in nuxt.config.js #680

Open FollowJack opened 2 years ago

FollowJack commented 2 years ago

Description

When adding css into the nuxt config css: [ '@egjs/flicking/dist/flicking.min.css',// css for slide animations and more '@egjs/flicking/dist/flicking-inline.min.css',// css for slide animations and more "@egjs/flicking-plugins/dist/flicking-plugins.min.css", // css for auto slide ] they will load when in "dev" mode but not load into the dist folder when use of generate with target: 'static'.

What is the correct way to include flicking css files into a static nuxt project? CDN does not seem like a proper solution. All my other global defined css files are included into the dist folder. No purgeCss is used.

Steps to check or reproduce

Fresh nuxt project Target: 'static' include css files into nuxt.config (see above)

Please help

WoodNeck commented 2 years ago

Hello @FollowJack!

This might be a duplication of these issues, please check them and tell me if the issue doesn't resolve.

FollowJack commented 2 years ago

I checked those issues before. But they don't solve the issue. In nuxt you can add global CSS files via the nuxt.config. They will get included in the final dist folder. But somehow your CSS file is not included (works perfectly for other css files). Adding it manually as cdn link is a workaround and decreases the performance. Therefore not an acceptable answer. Please help and lets document the solution. Otherwise people will continue to fail using your amazing library with nuxt.js.

WoodNeck commented 2 years ago

@FollowJack Try importing styles in a <style> tag

<style>
@import '@egjs/vue-flicking/dist/flicking.css';
</style>
FollowJack commented 2 years ago

@WoodNeck sure that works. But that was not my point. I assume the default CSS loader of nuxt has a problem when generating the static files with the path of your css file in the nuxt folder .

Here an example of the global css definition in the nuxt.config.js // Global CSS: https://go.nuxtjs.dev/config-css css: [ '~/assets/css/global.css', // custome global css from assets folder 'animate.css/animate.min.css', // loaded from node_modules folder '@egjs/flicking/dist/flicking.min.css',// not loaded '@egjs/flicking/dist/flicking-inline.min.css',// not loaded "@egjs/flicking-plugins/dist/flicking-plugins.min.css", // not loaded ], The global CSS and the animate CSS is correctly loaded. Only your css file is not included.

WoodNeck commented 2 years ago

I think this is more of an issue with Nuxt.js, so I've created a question in their discussion. Please check that.