Slick Slider losing styles on build or publish

I’m having a problem with the Slick Slider. In Plasmic Studio, the slider isn’t broken, but when the build occurs, the slider kind of loses its style.

Some component packages require you to import some CSS when using codegen. For react slick you need to import slick-carousel/slick/slick-theme.css slick-carousel/slick/slick.css in your code.

When you use the CLI to sync a project with component packages that require this type of import, you should see a message like this

But the project is already with react slick on the imported projects.

Do I have to insert by custom css?

I meant you need to import the css in code, in the place your app imports global css. For next it’s usually in the _app.js file

If I’m using codegen, do I only have this way?

I was thinking that using the library inside Plasmic does not imply that I need to import it into my code. :thinking_face:

But I recognize that it might present a means of developing a fresh look at the code.

It should already be in your plasmic.json. The loader use case does not require you to have the package, but the codegen does. For codegen we don’t automatically add this css because we don’t want to change an user created file (_app.js) which could have a lot of other stuff that could break.

Is there any guide to follow to import these styles?

The main issue with this is that even if I wanted to use it, I would still have to import the code, which would slow down my workflow.

I’m the designer of the company. I can code, but there are a lot of processes inside our team and I only wanted to use the slider style.

Hi @miniature_horse! Yeah this is just a limitation of codegen vs the API - you just have to add the CSS one time, I think it could look something like this:

That was from https://react-slick.neostack.com/docs/get-started/

for NextJs there’s also this documentation of how to do it using import in _app.tsx : https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet

Thanks for helping me.

I made all that you said and I still can’t get the slider working properly with its styles. @yang @victor

Here is a repo that shows

create-plasmic-app

yarn add react-slick slick-carousel

// Then in you
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

Please let me know if this helps! https://github.com/plasmicapp/just-slider