cssruby-on-railsasset-pipelinesprocketsrails-sprockets

Disable loading all stylesheets in rails6 development

I want to load/unload the specific css debugging bulma structures by comment/uncomment the line of stylesheet_link_tag:

# app/view/layouts/application.html.erb
...
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <%# Bulma %>
    <%= stylesheet_link_tag 'https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css', media: 'all' %>
    <%# Debugger on/off by comment/uncomment %>
    <%# <%= stylesheet_link_tag 'bulma/debug' %> <- this line!
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
...

And my stylesheets dir tree is like this:

app/assets/stylesheets/
├── application.css
├── bulma
│   ├── debug.css
│   └── grid.css
└── posts.scss

But when I comment that line like above, the css file is loaded(and also for grid.css).

I think link_directory just the stylesheets dir, cannot load recursively:

# app/assets/config/manifest.js
//= link_tree ../images
//= link_directory ../stylesheets .css

And all the other configs are default to Rails 6.1.3.

Why app/assets/stylesheets/bulma/debug.css is loaded automatically and how can I disable it?

Solution

  • In your application.css file, you may have a line like *= require_tree . This will automatically include everything in your app/assets/stylesheets directory.

    Try adding underneath right after that line something like *= stub 'bulma/debug'. That should prevent the file from loading.

    It's not currently in the rails official rails documentation (from what I can see), but you can find stub and related Sprockets methods documented on Github.