iskurbanov/theme-app-extension-react

The theme.css file inside assets in extensions folder is not applying

Prashant-202 opened this issue · 6 comments

Prashant-202 commented

Issue summary

  • @shopify/shopify-app-express version:
  • Node version: 20.0.0
  • Operating system: Ubuntu

Expected behavior

The rules inside the external CSS will be loaded and applied to the elements.

Actual behavior

The CSS file is loaded and showing inside the network but the rules are not applied to it.

Steps to reproduce the problem

  1. Write some CSS code in the theme.css file inside the frontend/entrypoints folder.
  2. Give classname to the element in which we want to apply the css rules.
  3. Running the "npm run deploy" command and deploying the app
    SS_02
    SS_03
    SS_01
wrightmk commented

bump

iskurbanov commented

Yes, there must have been a small change in the build process that doesn’t acknowledge the tailwind styles when referenced separately.

You need to use the cssInjectedByJsPlugin to make it work. Npm install the package and then add it like this:

image

  • 👍2
wrightmk commented

This works! thanks!

  • 🚀3
921kiyo commented

Thank you! This fixed the issue for me as well!

bakikucukcakiroglu commented

Thank you! That solved my problem as well. However you need to indicate it somewhere because I spent more then 5 hours to fix it.

har1zarD commented

I have a problem with Tailwind. When I add 10 different app blocks, Tailwind does not apply to any of them. But if I add one more app block that is identical to one of those 10, Tailwind immediately applies to all app blocks. So I need to add 2 identical app blocks to get Tailwind classes. @iskurbanov