Undefined variable: "$bold-font-weight".

[stevepsharpe]

Hi all

I'm using the gem directly from Github and if I run rails generate administrate:assets:stylesheets. I get the following error Undefined variable: "$bold-font-weight". when trying to load anything in /admin

I also noticed that some of the generators seem to produce different code from the default code. For example 'rails generate administrate:views:new Client' the forms all look broken.

Any ideas how to resolve this?

[tysongach]

Here’s a relevant commit, which added the $bold-font-weight Sass variable: https://github.com/thoughtbot/administrate/commit/28e084f10c7b65f0779ab7e1dc52f1d7b3fe16fe

master is always a bit in flux, and especially the past couple weeks has seen a lot of updates.

Can you look in app/assets/stylesheets/administrate/library/_variables.scss and see if $bold-font-weight is defined in there?

[stevepsharpe]

Yeah, it appears to all be there. It just isn't being read correctly for some reason.

[stevepsharpe]

I just set the gem to cf1e39 and it seems to be working ok now. Maybe it's related to the Bourbon 5 commit?

[stevepsharpe]

Ok, I spoke too soon. It's still doing it. I restarted the server and now it's doing it all of the time.

[tysongach]

@stevepsharpe v0.1.3 was just released a few minutes ago and packages up everything that was on master. Can you swap for this official version and see if the issue persists?

[stevepsharpe]

Ok gem updated, everything works as expected until I run rails generate administrate:assets:stylesheets, then you start to get the Undefined variable: "$bold-font-weight" issue.

[j-dexx]

I have the same issue precompiling assets

[commuun]

Ran into the same issue. There seems to be something strange going on. The full error I get on precompile is:

Sass::SyntaxError: Undefined variable: "$bold-font-weight".
app/assets/stylesheets/administrate/base/_forms.scss:9

As a test I removed the line @import "base/**/*"; from app/assets/stylesheets/administrate/application.scss but the error persists. At that point it should not be trying to include _forms.scss, but it does.

[Decoherence]

Same issue here.

I tried running rails d administrate:assets:stylesheets followed by rails g administrate:assets:stylesheets to no avail.

❯ ruby -v
ruby 2.2.0p0 (2014-12-25 revision 49005) [x86_64-darwin15]

❯ rails -v
Rails 4.2.5

Gemfile: gem "administrate", "~> 0.1.3"

[c-lliope]

damn. I just spent about an hour on this, and I'm not really getting anywhere.

Here's one thing that I did that yielded mildly interesting results:

• Clone the Administrate repository
• Run rails generate administrate:assets:stylesheets

• Remove these lines from spec/example_app/app/assets/stylesheets/administrate/application.scss:

  @import "base/**/*";
  @import "components/**/*";

• Remove the root stylesheet from Administrate:

  rm app/assets/stylesheets/administrate/application.scss

After all of those things, the SCSS compiles correctly. Doing any of those individually doesn't work.

To me, this implies that the application.scss contained within the Administrate gem is telling the host application to compile those assets, even when the @import statements are removed from the host's administrate/application.scss.

Is anyone up for creating a minimal reproduction?

[chrisedington]

Also running into this problem. Any solutions yet?

Rails 4.2.5.1 ruby 2.3.0p0 Gem 0.14

@stevepsharpe did you manage to get past this problem?

[commuun]

This is not very helpful solving the actual problem but for those like me who need to make progress, I worked around the issue by importing the variables at the top of my application.scss

@import 'administrate/library/variables';

Note that this required me to copy-paste two values from the included Bourbon library in app/assets/stylesheets/administrate/library/_variables.scss

$modular-scale-ratio: 1.2;

$base-timing: cubic-bezier(0.215,  0.610, 0.355, 1.000);

[chrisedington]

Confirmed the above workaround lets me progress, thanks @commuun.

[chrisedington]

Actually still struggling with this issue, @commuun's fix made the pre-compilation succeed on my dev environment but as soon as I try do a asset pre-compilation in production it shows the same error again.

bundle exec rake assets:precompile

Result:

Undefined variable: "$bold-font-weight"

@graysonwright any ideas what I can try?

[commuun]

@chriscapetown Strange, fwiw I was able to deploy to production given the above workaround.

[chrisedington]

Interesting, thanks for letting me know, will dig a little more.

Would you be able to share a gist of your production.rb file? Maybe that will shed some light.

[commuun]

Not sure it will do much good, I'm not even sure I changed anything in the environment so far. (edit: I should say, this is a staging environment but it uses a copy of the production env)

https://gist.github.com/commuun/32e81d1c3edbf89275241820c4a12f48

[pmaojo]

This happened to me becouse initializer assets.rb had this line:

Rails.application.config.assets.precompile += %w( .css .js )

[commuun]

I just checked, my app doesn't have this wildcard precompile include. Mine is

Rails.application.config.assets.precompile += %w( docs.js docs.css )

But the problem persists (as long as I don't apply the above workaround.)

[chrisedington]

The wildcard interfered in our side too. We removed it completely.

If I remember rightly we ended up renaming the application.css to application.css.scss and adding a wildcard in there, will post the exact steps but this works in a prod environment too.

[chaostheory]

I can confirm that this still happens when you don't have a wildcard in assets.precompile calls

[chrisedington]

This works for us in dev and prod:

1. production.rb

We had this and removed it. Any wildcard here will break the pre-compilation. config.assets.precompile = ['*.js', '*.css', '**/*.js', '**/*.css']

1. application.css

Renamed this to application.css.scss and the contents as follows:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_self
 */
@import '*';

That was it, interested to know if this solves it for other people.

Would be great to have an official fix on this issue..

[tysongach]

For those of you unable to precompile: did you run rails generate administrate:assets:stylesheets and do you also have any Sprockets directives in your app’s CSS/Sass files (e.g. *= require_tree . inside application.css)?

On that note, can anyone share their code or a repo for a project that has this issue?

[c-lliope]

@tysongach you can reproduce the issue in the Administrate repository itself. If you follow the first two bullet points in https://github.com/thoughtbot/administrate/issues/429#issuecomment-183792145, you should get the error.

[chaostheory]

Just 2x checked; (doh!) found a wildcard in my assets.precompile calls in my production environment. Running rails generate administrate:assets:stylesheets fixed the problem for me.

[jesiegel1]

I was experiencing the error in dev as well, but was able to fix it by restructuring my asset directory's structure - as it turns out, the errors were being thrown because the main application manifest was overriding the administrate manifest

[tysongach]

@jesiegel1 Was this due to Sprockets directives, or was it overwritten another way?

@chaostheory So removing Sprockets directives solved the issue for you?

[jesiegel1]

@tysongach basically i noticed that my main app's application.scss had, as usual, require_tree . - which will include all asset that the manifest shares a directory with, recursively...which meant that since the administrate directory was generated within the assets/stylesheets/ directory, it was being included in the main application.scss. By putting all of my "main" stylesheets into a separate folder, "main", all the errors disappeared (assets/stylesheets/ now contains two folders: "main" and "administrate").

[tysongach]

@jesiegel1 Yep, these are the Sprockets directives that I had a hunch was causing some troubles. These require statements don't play nice with Sass’s @import which we use here in Administrate.

[jesiegel1]

@tysongach I have to check the docs, but I'm willing to bet there's a method to exclude a particular directory from require tree ., so maybe in the README you could advise users to add it.

[pmaojo]

So what I did only prevents error in development?

closing this issue is near

[chaostheory]

@tysongach if by Sprockets directives, you mean calls to assets.precompile with wildcards e.g. *.css then yes. I ensured my assets.rb fie didn't have any. Unfortunately my production.rb under environments did contain one call and after I removed it, running 'rails generate administrate:assets:stylesheets' fixed the problem for me.

[daoanhnhat1995]

remove *= require_tree from the main application.css helped me loads other stylesheet and therefore solved the problems

[jesiegel1]

but then you're not requiring tree...

[tysongach]

@jesiegel1 The idea is that instead of using Sprockets to require the tree, you use Sass to import partials instead. The problem with Sprockets is that we don’t gain the global namespace that we do when using Sass @import. In this case, it seems that $bold-font-weight is not being made available due to this.

Here’s a great article explaining this in more detail: https://blog.pivotal.io/labs/labs/structure-your-sass-files-with-import

[stanams]

Has summer inspired any final solution to that problem ? I've tried everything that is mentioned and none works for me (even in dev env). I'm using rails 5.0.0 beta3 / ruby 2.3.0p0

[jasonswett]

I was able to solve the issue by creating an app/assets/stylesheets/public directory and moving everything that used to live in app/assets/stylesheets (pre-Administrate) to app/assets/stylesheets/public. Then I changed require_tree . in app/assets/stylesheets/application.css to require_tree ./public.

You could of course call the public directory anything you want.

[tysongach]

Is this still an active issue? If it is, v0.7.0 was just released with lots of changes to the Sass that perhaps fixes it?

[maurcarvalho]

@tysongach I've tested with v0.7.0 and it still an active issue.

[drinks]

Still broken here after running rails g administrate:assets:stylesheets with require_tree . in application.css

[tysongach]

@drinks Does it work if you remove the require_tree .?

[drinks]

It does; and I've been proceeding that way, with explicit requires for app assets.

[pmaojo]

If the problem is with the scss, I would remove all styling and leave it clean so the css is loaded optionally from main app, or load specific scss/css manually I think that is a possible option.

[nickcharlton]

I'm going to close this as the last response was a little while ago and there's a solution here. But please open a new issue if it's still a problem for you!

[rahulpat]

@nickcharlton what's the solution?

[dduqueti]

@jasonswett thank you! Works for me! 🚀

[amolpujari]

just figured out the actual issue, I had to add below line in assets.rb ..for some other fix Rails.application.config.assets.precompile += ['*.js', '*.css'] if Rails.env.production?

removing this line, all worked well