Foundation-sites: Import of Foundation Failing

[erwstout]

This could very well be a user error, as this is the first time I am using bower to install foundation, but I ran into an error when trying to import the foundation files into my project.

I have a Wordpress project and I have my own custom theme.scss file that I am using to load my styles and inside of it (line 2 to be exact) I am importing foundation into my project:

@import '../../bower_components/foundation-sites/foundation-sites.scss';

I was immediately thrown this error via the CLI:

Error: bower_components/foundation-sites/foundation-sites.scss
Error: File to import not found or unreadable: foundation
       Parent style sheet: /Volumes/Storage/ericstout/Documents/GIT/wheels-for-water/wp-content/themes/bower_components/foundation-sites/foundation-sites.scss
        on line 1 of bower_components/foundation-sites/foundation-sites.scss
>> @import 'foundation';

I had to then go into foundation-sites.scss and change line 1 to:

@import 'scss/foundation';

Doing so caused foundation to import and compile correctly.

Is this user error? Or is line 1 of foundation-sites.scss incorrect?

[gakimball]

Try this instead:

@import '../../bower_components/foundation-sites/scss/foundation';

That will import the framework directly.

[erwstout]

@import 'scss/foundation'; works correctly.

So I guess my question is if its an error with foundation scss itself, or is it expected to change that line for every project after installation.

[gakimball]

I'd recommend not referencing that file at all. It's only useful if you're fine printing all of the CSS of the framework no matter what, and that's not how we advice using Foundation.

These are our two recommended ways to load the framework:

• Set an import path in your Sass compiler's config settings, then write @import 'foundation'.
• Use a relative path to go straight to the file, by writing @import 'bower_components/foundation-sites/scss/foundation.

[erwstout]

Hmm, I'm still having some issues.

From my theme.scss file I am using to import styles:

// Vendor Files
@import '../../bower_components/foundation-sites/scss/foundation.scss';

From foundation.scss:

/**
 * Foundation for Sites by ZURB
 * Version 6.0.6
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */

// 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';
// @import 'components/accordion';
// @import 'components/badge';
// @import 'components/breadcrumbs';
// @import 'components/callout';
// @import 'components/close-button';
// @import 'components/drilldown';
// @import 'components/dropdown-menu';
// @import 'components/dropdown';
@import 'components/flex-video';
// @import 'components/label';
// @import 'components/media-object';
// @import 'components/menu';
// @import 'components/off-canvas';
// @import 'components/orbit';
// @import 'components/pagination';
// @import 'components/progress-bar';
// @import 'components/reveal';
// @import 'components/slider';
// @import 'components/sticky';
// @import 'components/switch';
@import 'components/table';
// @import 'components/tabs';
// @import 'components/title-bar';
// @import 'components/top-bar';
// @import 'components/thumbnail';
// @import 'components/tooltip';

@mixin foundation-everything {
  @include foundation-global-styles;
  @include foundation-grid;
  @include foundation-typography;
  @include foundation-button;
  @include foundation-forms;
  @include foundation-visibility-classes;
  @include foundation-float-classes;
  @include foundation-accordion;
  @include foundation-accordion-menu;
  @include foundation-badge;
  @include foundation-breadcrumbs;
  @include foundation-button-group;
  @include foundation-callout;
  @include foundation-close-button;
  @include foundation-drilldown-menu;
  @include foundation-dropdown;
  @include foundation-dropdown-menu;
  @include foundation-flex-video;
  @include foundation-label;
  @include foundation-media-object;
  @include foundation-menu;
  @include foundation-off-canvas;
  @include foundation-orbit;
  @include foundation-pagination;
  @include foundation-progress-bar;
  @include foundation-slider;
  @include foundation-sticky;
  @include foundation-reveal;
  @include foundation-switch;
  @include foundation-table;
  @include foundation-tabs;
  @include foundation-thumbnail;
  @include foundation-title-bar;
  @include foundation-tooltip;
  @include foundation-top-bar;
}

What is outputted in my theme.css:

@charset "UTF-8";
/**
 * Foundation for Sites by ZURB
 * Version 6.0.6
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */

Notice nothing is being imported but the comment.

This is a fresh package install from bower as well, so I have not modified anything but the commented out @imports you see in foundation.scss.

And just as a reference point here is my foundation-sites.scss file:

@import 'foundation';

@include foundation-everything;

Thoughts? I don't think I should create a new issue, but if you think it would be better fitted as one I can.

[gakimball]

@buschschwick You should be getting a compile error, because foundation-everything() is trying to load the entire framework, but you've commented out certain components.

To individually export components, borrow the mixins from this file. You also don't need to comment out the imports in foundation.scss—they don't print any CSS on their own.

[erwstout]

Thanks. I got it all figured out. My confusion was that I should be adding components to my main scss file, not any of the bower related foundation files. Thanks for your help, its greatly appreciated.

[mwq27]

I'm having this same issue, @buschschwick what did you add to your main scss file to get it to work?
I currently have:

@import "foundation";

but in the output I get

/**
 * Foundation for Sites by ZURB
 * Version 6.1.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */

and no styles from the imports of foundation.scss.

[erwstout]

Hi @mwq27

So I'm going to assume you're using some sort of a package manager such as npm or bower to install your Foundation files. Where I had gone wrong was how to import them and I was editing files inside the package manager source, which I knew felt wrong since an update would wipe my changes. So download your foundation install, and then in your own app.scss or whatever your main scss file is, you would have something similar to this:

// Vendor Files
@import 'settings/settings';
@import 'foundation';

@include foundation-grid;
@include foundation-typography;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-flex-video;
@include foundation-table;

Here, I am including the settings file settings/settings which I copied from the foundation install to my project folder to give my foundation setup custom settings, and then I'm including foundation and then the @include .. you see is me picking what options I want from the foundation install.

Hope that helps.

[mwq27]

Thanks @buschschwick, I was including things like

@include foundation-dropdown(); //with the parenthesis

which didn't throw any errors for whatever reason ha. Things are working nicely now.

[zsoltmar]

This issue just popped up for me using CodeKit. Initially @import 'foundation'; worked just fine, now unless I add @import 'scss/foundation'; I get the error message. What exactly needs to be done so @import 'foundation'; works again?

[williamweckl]

+1