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

Generated CSS works running with npm, but not embedded in Magento #40

Open rafabandero opened 11 months ago

rafabandero commented 11 months ago

I've changed primary background colors in tailwind.config.js and it works properly while runing the app through npm, but not embedded in Magento.

*Preconditions ()**

  1. Magento 2.4.6-p2
  2. hyva-themes/magento2-react-checkout 1.1.3
  3. node v16.20.2 and npm 8.19.4

*Steps to reproduce ()**

  1. Change primary background color in reactapp/tailwind.config.js
      backgroundColor: {
        primary: {
          lighter: '#e8697f',
          DEFAULT: '#ea0029',
          darker: '#a7001f',
        },
        secondary: {
          lighter: colors.blue['100'],
          DEFAULT: colors.blue['200'],
          darker: colors.blue['300'],
        },
        container: {
          lighter: '#ffffff',
          DEFAULT: '#fafafa',
          darker: '#f5f5f5',
        },
      },
  1. Execute npm install
  2. Execute npm run build
  3. In magento checkout the CSS changes doesn't get applied:

image

  1. Executing npm run start the changes works properly:

image

** I figured out that the new style classes I've included in reactapp/src/tailwindcss/components/theming.css are not accessible in Magento too. Tried to redeploy static content but nothing changes.