search

hyva-themes / magento2-checkout-example

A React Checkout template that allows you to quickly create a customized Hyvä Checkout for your project.
11 stars 2 forks source link

Build app with component styles #25

Closed harli91 closed 1 year ago

harli91 commented 2 years ago

I import some css styles in my payment method component using import './style.css'; The problem is that when i build using npm run build the css file is not bundled with the rest of the css styles, How do i add them to the bundle on build?

rajeev-k-tomy commented 2 years ago

This is by default not possible as the create-react-app does not simply does the job for us. We are relying on tailwindcss in order to style the components and during the build process, we are building the tailwindcss using a separate command. So if you want to compile you custom css file as you have mentioned, then you probably need to include special config to compile the css in the create-react-app.

Please see the doc in create-react-app in order to do component styling there: https://create-react-app.dev/docs/adding-a-stylesheet/

Normally, if we have a separate file needs to be loaded in the checkout page, then we include it directly on the page via layout xml update. You can see this is happening with payone payment integration where we need to include couple of css files separately.

Hope this will help you.