Asset Pipeline Undefined Variable SASS

Asset Pipeline Undefined Variable SASS

You have to do the following:

Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the @fa-font-path or $fa-font-path variable to point to your font directory.

Source: fontawsome's documentation

http://fontawesome.io/get-started#custom-less

Precompiling SCSS: variable is undefined (Rails 4)

This is a tricky problem with the current version of Sprockets and sass-rails. You would think that the *= require lines in your application.css file would load the variables in order so that they would be available to all scss files, but it does not. Here is what the asset pipeline Rails guide says about it:

If you want to use multiple Sass files, you should generally use the
Sass @import rule instead of these Sprockets directives. Using
Sprockets directives all Sass files exist within their own scope,
making variables or mixins only available within the document they
were defined in. You can do file globbing as well using @import "",
and @import "*/*" to add the whole tree equivalent to how
require_tree works. Check the sass-rails documentation for more info
and important caveats.

In other words, you have a two choices:

• @import your variables in each file as you need them
• Use @import in your application.css.scss file instead of *= require

If you go with the first option, just drop in @import 'partials/colors'; to the top of _boxes.css.scss.

With the second option, you just need to @import your stylesheets in your application.css.scss once (in the proper order), then your variables in mixins will be available to all stylesheets. You're still using the asset pipeline here so precompilation will still work fine, but you're letting sass-rails work its sass magic. Your application.css.scss would look something like this:

@import 'partials/colors';
@import 'partials/*';
@import '*';

Be warned though, there is currently a bug with sass-rails. If you have .erb stylesheets, sass-rails won't be able to import them by wildcard if they're in a seperate folder.

Asset pipeline undefined variable

remove the

*= require_tree .

otherwise, you load everything twice and also there is no chance to load it in the correct order. rails just load it in a "random" way and then u most of the time run into errors.

Variable undefined inside a SASS import in Rails

This behaviour exisits because of two reasons:

1. Rails sets up Sprockets so that by default any stylesheet file under app/assets/stylesheets is loaded
2. SASS is smart enough not to double-load an already loaded stylesheet file.

While (2) is a desired behaviour, (1) sometimes is not. To disable it, you can remove the Sprockets instruction

/*
 *= require_tree
 */

from your app/assets/stylesheets/application.css. This instruction walks through your asset directory recursively (hence tree) and only obeys alphabetical order (as far as I know). This results in loading your styles.css.scss first, and after that your templates/_navigation.css.scss.

The SASS error is a result of that: the style.css.scss already references a then-unknown variable which is only defined afterwards.

Sass variable undefined during Rails asset precompile

You just need to add @import "settings" into your some-sass-file. Asset pipeline will minify it for you so there is no problem.

rails bootstrap-sass assets compilation error - undefined variable alert-padding

My specific problem turned out to be some code hiding in application.rb...

how I found it

I added puts config.assets.precompile.inspect to config/environments/production.rb and marvelled at the regex it output. Then I searched the codebase for "config.assets.precompile" and lo, in application.rb, there was:

config.assets.precompile << /(^[^_\/]|\/[^_])[^\/]*$/
...
config.assets.precompile += ["*.js", "*.css", "jquery-migrate-rails.js"]

which was causing the problem. (I'm slightly puzzled as I've triple checked those regexes and they shouldn't be picking up _alerts.scss... but lets gloss over that and focus on the fact that removing those lines fixed it)

Maybe this will help someone else...

---

Related Topics