SASS load path?

Rails
1

Putting this in my application.css.scss does not load the sass library.

@import ‘foundation.scss’;

Even if I put this in my config.

config.sass.load_paths << Rails.root.join( ‘vendor’, ‘assets’,
‘components’, ‘foundation-sites’, ‘scss’ )

Thanks.

2

Hey Justin,

  • The extension isn’t necessary for the @import (‘foundation’ should
    work just fine)
  • The error should include the sass load paths. You’ll see that
    Rails
    looks in some specific folders under vendor/assets. For sass, the
    convention is to put your sass/scss files under
    vendor/assets/stylesheets
    (you can add subfolders in here without additional configuration).
    If you
    decide to move your components folder there, you don’t need the
    sass.load_paths config.
  • If you still want to load your scss file from
    vendor/assets/components, you can add it to the sass load paths (as
    you’ve
    done), and that should work after a server restart. Is your
    foundation.scss file in
    vendor/assets/components/foundation-sites/scss?

Jim

3

I can probably put it anywhere, but I’m using bower to manage
js/css/scss.
Going by an article is how I decided on components folder. Seems nice
and
clean that way, but I’m open to better options. Yes the scss is in that
folder it’s called foundation.scss. No underscore in file name. Yes I
restarted. However now that you mention the error, there is no error.
There’s just no css in the application.css file it creates. And the
clear
fact there’s no style. :slight_smile: The foundation.scss just has a bunch of
includes.
Here’s a sample.

/ Sass utilities
@import ‘util/util’;

// Global variables and styles
@import ‘global’;

// Components
@import ‘grid/grid’;
@import ‘typography/typography’;
@import ‘forms/forms’;
@import ‘components/visibility’;
@import ‘components/float’;
@import ‘components/button’;
@import ‘components/button-group’;
@import ‘components/accordion-menu’;

4

Ya it appears to pull in the foundation.scss file, but none of the
imports
in that file.

5

Interesting. Have you tried clearing Rails’ tmp files with rake tmp:clear? I’ve seen that clear up weird asset-related issues.

If that doesn’t work, would it be possible to push your app to GitHub or
somewhere public so I could take a look? If the code is private, you
could
potentially create a fresh rails app with a minimal example of your
problem
(just your bower set up with application.scss importing foundation.scss

the minimal case might even shed light on the problem itself).

6

I created a new app and setup bower with it. Added to load path. It does
the same. Loads the specific file, but that loaded files imports do not
load.

7

OMG I’m just stupid. I just figured out what my issue is. All is working
fine, I just forgot to use the includes. Geez. Sorry for the waste of
time,
and thanks for helping out.

8

Justin S. wrote in post #1182237:

OMG I’m just stupid. I just figured out what my issue is. All is working
fine, I just forgot to use the includes. Geez. Sorry for the waste of
time,
and thanks for helping out.

Could I trouble you to elaborate on what you mean by “forgot to use the
includes”?

I’m having the same issue as you described and I’m having a hard time
resolving it.

I’m using bower-rails, foundation-sites is installed in
vendor/assets/bower_components/foundation-sites

I renamed my application.css file to application.scss and simply added
@import ‘foundation’ and when I inspect my page (in firefox) i can see
the comments from the foundation.scss file but none of the imports.
It’s empty.

Any insight would be most helpful.

9

No problem - glad you got it worked out!

10

New day, fresh eyes.

I was able to find a solution here:
http://foundation.zurb.com/forum/posts/37580#comment_31275

I need to do some studying on SASS obviously.

Hopefully if anyone experiences the same issue, this will help them get
over the hump.

According to the forum post above, the solution is to add
@include foundation-everything;
to the bottom of the foundation.scss file that lies at the root of the
scss folder.

Good luck sassy people.

Tom Alexander wrote in post #1184883:

Justin S. wrote in post #1182237:

OMG I’m just stupid. I just figured out what my issue is. All is working
fine, I just forgot to use the includes. Geez. Sorry for the waste of
time,
and thanks for helping out.

Could I trouble you to elaborate on what you mean by “forgot to use the
includes”?

I’m having the same issue as you described and I’m having a hard time
resolving it.

I’m using bower-rails, foundation-sites is installed in
vendor/assets/bower_components/foundation-sites

I renamed my application.css file to application.scss and simply added
@import ‘foundation’ and when I inspect my page (in firefox) i can see
the comments from the foundation.scss file but none of the imports.
It’s empty.

Any insight would be most helpful.