Unable to access default css file in Petal 1.0.0 update

Hello -

I am still very new to Phoenix / Elixir. I am having a very difficult time simply importing an additional css file in my app.css file.

I am using Petal and just up downloaded their major update (to 1.0.0 ). The instructions shown here: Install has the following lines:

@import "tailwindcss/base"; 
@import "../../deps/petal_components/assets/default.css"; 
@import "tailwindcss/components"; 
@import "tailwindcss/utilities";

The problem is that @import "../../deps/petal_components/assets/default.css"; is simply not being imported / built. Is this an esbuild problem? This problem is documented here: elixir - add CSS files to Phoenix - Stack Overflow but I followed these instructions and still no luck. Any ideas? I also imported the css file in the app.js file (which still doesn’t make sense to me since it’s a css file and I am coming from a webpack background…) but that didn’t work either…

Posting here for posterity as this is the first search result on the topic:

Check the relative path of your import. I was in an umbrella app, so my import needed to look like this:

@import "../../../../deps/petal_components/assets/default.css";

Thanks @acco. I never followed up here, but I created a Github Issue that was eventually resolves: Bug: Unable to import "../../deps/petal_components/assets/default.css"; in app.css file · Issue #154 · petalframework/petal_components · GitHub

1 Like