I have added CSS inside /public/Yves/assets/current/default/css but it is not reflecting in my live

U03DQ4D8L65

I have added CSS inside /public/Yves/assets/current/default/css but it is not reflecting in my live env. Can anyone help me What wrong i performed ?

Alberto Reyer

CSS is build from the related SASS files using the command frontend:yves:build.

So if you want to modify the styling of your shop have a look into the ShopUi module and the related documentation: https://docs.spryker.com/docs/scos/dev/front-end-development/yves/atomic-frontend/atomic-front-end-general-overview.html#shop-ui

Normally you do not want to modify everything but only one ~component~ part, which you can by searching for the ~component~ part and the related .scss.
(Edited: component is a named concept in Spryker and I wanted to reference to the more general concept of a component, not the Spryker component)

Example: You want to modify the footer, search for a footer component (can be found at https://github.com/spryker-shop/b2b-demo-shop/tree/master/src/Pyz/Yves/ShopUi/Theme/default/components/organisms/footer).
This now can have a SASS file for styling (https://github.com/spryker-shop/b2b-demo-shop/blob/master/src/Pyz/Yves/ShopUi/Theme/default/components/organisms/footer/footer.scss) that needs to be included into the build process by importing it to the index.ts of those component (https://github.com/spryker-shop/b2b-demo-shop/blob/master/src/Pyz/Yves/ShopUi/Theme/default/components/organisms/footer/index.ts)

U03DQ4D8L65

Thanks @UL6DGRULR. I have created custom template for CMS Page and i want to apply CSS to that page only then how can i do ?

Alberto Reyer

Like you would normally do in css, give the top element of your page a special css class and implement your styling for these css class or children of those elements.

U03DQ4D8L65

@UL6DGRULR Yes I have added it and placed in shopUI directory. I want that it should load for only one CMS Page.

Alberto Reyer

I'm not sure if loading a CSS only for a certain page is possible by default. If your styling for the CMS page is not completely overloaded, loading a second CSS might be overkill and using the standard CSS file might be enough.

If you still want to load the CSS only on a specific page, I suggest implementing a new CMS page template (https://docs.spryker.com/docs/scos/dev/tutorials-and-howtos/howtos/feature-howtos/cms/howto-create-cms-templates.html#cms-page-template) and use the \SprykerShop\Yves\ShopUi\Twig\ShopUiTwigExtension::FUNCTION_GET_PUBLIC_FOLDER_PATH twig function ({{ publicPath('your.css') }}) to build the correct url.

U03DQ4D8L65

Thanks @UL6DGRULR