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

[FollowJack]

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]

Hello @FollowJack!

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

• https://github.com/naver/egjs-flicking/issues/573
• https://github.com/naver/egjs-flicking/issues/654 ( Sorry but please use the translator for this issue :) )

[FollowJack]

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]

@FollowJack Try importing styles in a <style> tag

<style>
@import '@egjs/vue-flicking/dist/flicking.css';
</style>

[FollowJack]

@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]

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

• https://github.com/nuxt/nuxt.js/discussions/10474