Administrate: Administrate's stylesheets with Webpacker in Rails 6

[gabrielguerin]

Hello everyone!

I have been struggling to import Administrate's stylesheets in a new Rails 6 app. After running the generator using rails generate administrate:assets:stylesheets and restarting my server, I get the following error SassC::SyntaxError in app/assets/stylesheets/administrate/base/_forms.scss:

Error: Undefined variable: "$bold-font-weight".
        on line 9:16 of app/assets/stylesheets/administrate/base/_forms.scss
>>   font-weight: $bold-font-weight;

I am new to Rails 6 so I am probably importing Administrate's stylesheets the wrong way. This problem never occured in my previous Rails 5 app so I suppose it is linked to how Rails 6 manages stylesheets. Also, when I delete the stylesheets generated through Administrate's generator, I can access the admin dashboard again. I also followed Thoughtbot's tutorial on Rails 6 & Webpacker but I do not really understand the Rejoice part about how to do the same with Administrate's CSS.

Any help/advice is welcome :)

Thank you in advance!

[gabrielguerin]

I forgot to mention that the problem seems to be linked to Administrate's variables such as $grey-7 because if I comment font-weight: $bold-font-weight;, then the problem appears on the next variable.

[sedubois]

Can this have anything to do with missing Sprockets 4 config? #1452

[gabrielguerin]

I think it's more linked to these two issues: Sass undefined variable on precompilation & rails bootstrap-sass assets compilation error - undefined variable alert-padding

[gabrielguerin]

I found the solution to my problem. I had to add these lines at the beginning of the file specified by the errors: (for example: on line 2:21 of app/assets/stylesheets/administrate/components/_main-content.scss).

If the error is:

• Error: Undefined variable: add @import "../library/variables";.
• Error: no mixin named administrate-clearfix: add @import "../library/clearfix";
• Error: no mixin named data-label: add @import "../library/data-label";

In app\assets\stylesheets\administrate\application.scss, you can then comment these lines:

// @import "library/clearfix";
// @import "library/data-label";
// @import "library/variables";

I found the solution here: rails bootstrap-sass assets compilation error - undefined variable alert-padding.

I hope this will help someone!

UPDATE 1

Instead of doing what I mentioned above, just add in config\initializers\assets.rb the following line: Rails.application.config.assets.precompile += %w[administrate/application.css].

Do not forget to restart your server!

UPDATE 2

Instead of the above, removing from app\assets\stylesheets\application.css the following lines:

*= require_tree .
*= require_self

also worked for me.

[nickcharlton]

There's also wiki page documenting this in more depth.