Menu icon Foundation
How to import Foundation scss into project

I'm trying to use foundation-sites within my project. My project has a theme.scss file. In this file I am attempting to centralize my imports. What is the appropriate way to import the entire Foundation framework? Currently, I am manually importing each file like this:

// Settings
@import '../jspm_packages/github/zurb/[email protected]/scss/settings/settings';

// Sass utilities
@import '../jspm_packages/github/zurb/[email protected]/scss/util/util';

// Global variables and styles
@import '../jspm_packages/github/zurb/[email protected]/scss/global';

// Components
@import '../jspm_packages/github/zurb/[email protected]/scss/grid/grid';
@import '../jspm_packages/github/zurb/[email protected]/scss/typography/typography';
@import '../jspm_packages/github/zurb/[email protected]/scss/forms/forms';
@import '../jspm_packages/github/zurb/[email protected]/scss/components/visibility';
@import '../jspm_packages/github/zurb/[email protected]/scss/components/float';
...

The first issue I'm having is that within the _settings.scss file, there is an @import statement for 'utils/utils'. This causes an error because there is no `utils/_utils.scss` file within the `settings` directory. Why is that @import statement there? Is that a bug?

Secondly, I'm just wondering in general if this is the appropriate way to import the framework. Thanks a lot!

importfoundation-sites

I'm trying to use foundation-sites within my project. My project has a theme.scss file. In this file I am attempting to centralize my imports. What is the appropriate way to import the entire Foundation framework? Currently, I am manually importing each file like this:

// Settings
@import '../jspm_packages/github/zurb/[email protected]/scss/settings/settings';

// Sass utilities
@import '../jspm_packages/github/zurb/[email protected]/scss/util/util';

// Global variables and styles
@import '../jspm_packages/github/zurb/[email protected]/scss/global';

// Components
@import '../jspm_packages/github/zurb/[email protected]/scss/grid/grid';
@import '../jspm_packages/github/zurb/[email protected]/scss/typography/typography';
@import '../jspm_packages/github/zurb/[email protected]/scss/forms/forms';
@import '../jspm_packages/github/zurb/[email protected]/scss/components/visibility';
@import '../jspm_packages/github/zurb/[email protected]/scss/components/float';
...

The first issue I'm having is that within the _settings.scss file, there is an @import statement for 'utils/utils'. This causes an error because there is no `utils/_utils.scss` file within the `settings` directory. Why is that @import statement there? Is that a bug?

Secondly, I'm just wondering in general if this is the appropriate way to import the framework. Thanks a lot!

Andrin Heusser almost 4 years ago

check this out: https://github.com/idcware/node-sass-jspm-importer

I don't use gulp, so I just do:

sass.render({
...
    functions: sassJspm.resolve_function('jspm_packages'),
    importer: [sassJspm.importer, nodeSassGlobbing],
...