CSS not loading in Sprockets on 2.0.0

[jonathandean]

I have an app with madmin working without issue until 2.0.0 and after upgrading I see no styles.

My app uses sprockets and importmaps. I have also tried to run the install generator again and also generate views.

The console shows that it can't fetch the newly split CSS files

GET http://localhost:3000/reset.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:3000/trix.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:3000/sidebar.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:3000/pagination.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:3000/actiontext.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:3000/tables.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:3000/buttons.css net::ERR_ABORTED 404 (Not Found)Understand this errorAI
GET http://localhost:3000/forms.css net::ERR_ABORTED 404 (Not Found)

from application-66ab1f74bae387890dacfe11cce5e0c8f39559dc6bc52b3899bd87b94211822a.css:6

@import url(/../trix.css);
@import url(/actiontext.css);
@import url(/reset.css);
@import url(/sidebar.css);
@import url(/buttons.css);
@import url(/forms.css);
@import url(/tables.css);
@import url(/pagination.css);

Does 2.0.0 require propshaft and cssbundling-rails?

[excid3]

Please provide a reproduction app so we can take a look.

[jonathandean]

@excid3 here is a sample app for you: https://github.com/jonathandean/madmin-2-sprokets-sample-app

Note: the rails server is running on port 3010 in these screenshots from the command:

PORT=3010 bin/rails server

Here's everything I did:

1. rails _7.2.2.1_ new madmin-2-sprokets-sample-app (Chose the latest Rails 7 because it would come with sprockets working out of the box, reducing any potential for other configuration issues)

2. bundle install

3. rails g madmin:install

4. Added HomeController so there was a route to use as the root_url

[SyedMSawaid]

I did this to make it work with my application. I use jsbundling-rails and tailwindcss-rails.

This application.css is from the madmin library.

[ryw]

I seem to have same issue, it's not clear what you did to fix it @SyedMSawaid from your last message above.

Could you add branch to your demo app showing how you resolved, or elaborate?

I'm not familiar with jsbundling-rails and i'm not using tailwindcss-rails — added tailwind a while back to this project "the hard way" I guess :)

[excid3]

Sprockets handles url() differently than Propshaft.

It might be possible to detect which asset pipeline is being used and serve a different file. Otherwise, we could likely combine all these into one massive file, but it will make maintaining the gem harder.

[SyedMSawaid]

@ryw I went to the application.css of madmin gem and changed the @import url(./trix.css) to @import "trix.css".

[avdept]

Having same issue. Locally I managed to fix it in following way

get '/trix.css', to: redirect('/assets/trix.css')
    get '/reset.css', to: redirect('/assets/madmin/reset.css')
    get '/actiontext.css', to: redirect('/assets/madmin/actiontext.css')
    get '/sidebar.css', to: redirect('/assets/madmin/sidebar.css')
    get '/buttons.css', to: redirect('/assets/madmin/buttons.css')
    get '/forms.css', to: redirect('/assets/madmin/forms.css')
    get '/tables.css', to: redirect('/assets/madmin/tables.css')
    get '/pagination.css', to: redirect('/assets/madmin/pagination.css')

but on production with asset digest - I can't get it to work

[avdept]

Ok, I fixed it following way

#routes.rb

    get '/reset.css', to: 'assets#redirect', defaults: { asset: 'madmin/reset.css' }
    get '/actiontext.css', to: 'assets#redirect', defaults: { asset: 'madmin/actiontext.css' }
    get '/sidebar.css', to: 'assets#redirect', defaults: { asset: 'madmin/sidebar.css' }
    get '/buttons.css', to: 'assets#redirect', defaults: { asset: 'madmin/buttons.css' }
    get '/forms.css', to: 'assets#redirect', defaults: { asset: 'madmin/forms.css' }
    get '/tables.css', to: 'assets#redirect', defaults: { asset: 'madmin/tables.css' }
    get '/pagination.css', to: 'assets#redirect', defaults: { asset: 'madmin/pagination.css' }

#assets_controller.rb

def redirect
    asset_path = helpers.asset_path(params[:asset])
    redirect_to asset_path
  end

What it does - it simply redirects to digested version of asset

[excid3]

rails/propshaft#219

[excid3]

Pushed up a PR that supports sprockets. Try it out and let me know if it works for ya!