Problem with @import in manifest file

[Szymon Szeliga]

Hello,

In all my rails projects I've structured my sass files in the following way:

├── application.sass
├── frontend
│   └── main.sass
├── layouts
│   ├── devise.sass
│   └── main.sass
├── lib
│   ├── bootstrap.scss
│   ├── font.sass
│   └── vars.scss
└── views
    └── products.sass

application.sass is the manifest:

@import bootstrap-sprockets
@import lib/vars
@import devise_bootstrap_views
@import font-awesome

@import lib/bootstrap
@import lib/font

@import layouts/main
@import layouts/devise
@import views/products
@import frontend/main

And it worked, until today. Now when any of the imported files refer to a mixin or variable, that is imported in the main manifest, it bugs out at precompilation with the message Sass::SyntaxError: Undefined mixin 'rounded'.

My gem versions are:

• rails 4.2
• sass 3.4.9
• sass-rails 5.0.1

I don't know if I should be posting here, or on the sass repo issue tracker, or on stackoverflow, feel free to point me in the right direction :)

[Joshua Peek]

So far that layout seems like it should work. Everything is .scss or .sass and you're using imports, so that good.

Can you post a little more context about where rounded is defined and what files are including it?

[Szymon Szeliga]

rounded is used inside a gem, that is a rails engine. But rounded is just an example. In views/products.sass I refer to variable defined in lib/vars and then it bugs out with:

`Sass::SyntaxError: Undefined variable: "$gray-dark".
  (in /Volumes/data/sample_app/app/assets/stylesheets/views/products.sass:8)

When I add @import lib/vars on the first line of products.sass, the error goes away, but bugs out on the rounded mixin. But in order to fix this completely, I would have interfere in every gem that has some internal styles.

Variables are defined like this:

$gray-base:              #000 !default;
$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
$gray-dark:              lighten($gray-base, 20%) !default;   // #333
$gray:                   lighten($gray-base, 33.5%) !default; // #555
$gray-light:             lighten($gray-base, 46.7%) !default; // #777
$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee

They are copied from https://github.com/twbs/bootstrap-sass repo. I tried adding !global to the variables, but it didn't work.

[Szymon Szeliga]

Okay, figured it out. As it turns out, my teammate changed the assets precompilation array to globs, and sprockets tried to compile every css on it's own.

[max]

I had the same issue "Undefined variable: "$gray-lighter"" and moving the color definition variables from application.scss to custom.scss fixed the problem. Didn't have to move anything else from application.scss just the color variables even though color variables are used in application.scss.

[Robin Dupret]

@KudosX : Maybe you're using Sprockets' require on top of your SCSS files ; you should not, they may break everything, only rely on @import.

[max]

@robin850: thanks for the feedback, much appreciated. this is what i have in my application.scss file:
*= require jquery-ui
*= require_tree .
*= require_self
*/
@import 'bootstrap-sprockets';
@import 'bootstrap';
@import 'posts';

[Robin Dupret]

I may be wrong but removing the require statements can make the issue go away, you can try:

@import 'jquery-ui';
@import 'bootstrap-sprockets';
@import 'bootstrap';
@import 'posts';

Doing a require_tree is generally not a good idea because you don't always know what is loaded and in which order so some CSS rules may take precedence over other ones but anyway, you can mimic this behavior with:

@import './**/*';

[max]

@robin850: thanks robin! I should have done a better job of reading the boostrap-sass gem docs. I did what you suggested (taking all requires out of application.scss) and also had to change //= require bootstrap-sprockets to //= require bootstrap in application.js file. Now the color variables work in application.scss file. Also during my time playing with having no sprockets in application.scss and having it in application.js my glyphicons disappeared, interesting effect.

I was using an abundance of !important in my mediaqueries and other scss files so my NAVBAR got a little funky but, easily fixed. It did have a small affect on my drop down menu of my search box using searchkick, jqueryui autocomplete, fixed by adding back to application.scss *= require jquery-ui. There was some weird css behavior before and looks like i was over compensating for it due to the require statements in my application.scss.