Create a new Angular CLI project with the SASS style option:ng new my-foundation-app --style=sass
cd my-foundation-app
Install the SASS version of the Foundation for Sites project with:npm install foundation-sites --save
In the src/assets/
directory, create a directory named foundation-sites
with empty files named: _settings.scss
and _global.scss
.
In the _global.scss
file, paste the content from: node_modules/foundation-sites/scss/_global.scss
.
In the _settings.scss
file, paste the content from: node_modules/foundation-sites/scss/settings/_settings.scss
.
In the _settings.scss
file, find the line with @import 'util/util';
and change it to point to the proper directory:@import '../node_modules/foundation-sites/scss/util/util';
In src/styles.sass
, add the import statements from node_modules/foundation-sites/scss/foundation.scss
, adjusting the directory path as in the example below. Note that we are using our custom settings and global files that we placed in the src/assets/foundation-sites
directory.
/\*\*
- Foundation for Sites by ZURB
- Version 6.3.0
- foundation.zurb.com
- Licensed under MIT Open Source
\*/
// Dependencies
@import "../node_modules/foundation-sites/\_vendor/normalize-scss/sass/normalize";
@import '../node_modules/foundation-sites/\_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';
@import '../node_modules/foundation-sites/\_vendor/sassy-lists/stylesheets/helpers/true';
@import '../node_modules/foundation-sites/\_vendor/sassy-lists/stylesheets/functions/purge';
@import '../node_modules/foundation-sites/\_vendor/sassy-lists/stylesheets/functions/remove';
@import '../node_modules/foundation-sites/\_vendor/sassy-lists/stylesheets/functions/replace';
@import '../node_modules/foundation-sites/\_vendor/sassy-lists/stylesheets/functions/to-list';
// Sass utilities
@import '../node_modules/foundation-sites/scss/util/util';
// Settings (Custom)
@import "assets/foundation-sites/settings";
// Global variables and styles (Custom)
@import 'assets/foundation-sites/global';
// Components
@import '../node_modules/foundation-sites/scss/grid/grid';
@import '../node_modules/foundation-sites/scss/typography/typography';
@import '../node_modules/foundation-sites/scss/forms/forms';
@import '../node_modules/foundation-sites/scss/components/visibility';
@import '../node_modules/foundation-sites/scss/components/float';
@import '../node_modules/foundation-sites/scss/components/button';
@import '../node_modules/foundation-sites/scss/components/button-group';
@import '../node_modules/foundation-sites/scss/components/accordion-menu';
@import '../node_modules/foundation-sites/scss/components/accordion';
@import '../node_modules/foundation-sites/scss/components/badge';
@import '../node_modules/foundation-sites/scss/components/breadcrumbs';
@import '../node_modules/foundation-sites/scss/components/callout';
@import '../node_modules/foundation-sites/scss/components/card';
@import '../node_modules/foundation-sites/scss/components/close-button';
@import '../node_modules/foundation-sites/scss/components/drilldown';
@import '../node_modules/foundation-sites/scss/components/dropdown-menu';
@import '../node_modules/foundation-sites/scss/components/dropdown';
@import '../node_modules/foundation-sites/scss/components/flex';
@import '../node_modules/foundation-sites/scss/components/responsive-embed';
@import '../node_modules/foundation-sites/scss/components/label';
@import '../node_modules/foundation-sites/scss/components/media-object';
@import '../node_modules/foundation-sites/scss/components/menu';
@import '../node_modules/foundation-sites/scss/components/menu-icon';
@import '../node_modules/foundation-sites/scss/components/off-canvas';
@import '../node_modules/foundation-sites/scss/components/orbit';
@import '../node_modules/foundation-sites/scss/components/pagination';
@import '../node_modules/foundation-sites/scss/components/progress-bar';
@import '../node_modules/foundation-sites/scss/components/reveal';
@import '../node_modules/foundation-sites/scss/components/slider';
@import '../node_modules/foundation-sites/scss/components/sticky';
@import '../node_modules/foundation-sites/scss/components/switch';
@import '../node_modules/foundation-sites/scss/components/table';
@import '../node_modules/foundation-sites/scss/components/tabs';
@import '../node_modules/foundation-sites/scss/components/title-bar';
@import '../node_modules/foundation-sites/scss/components/top-bar';
@import '../node_modules/foundation-sites/scss/components/thumbnail';
@import '../node_modules/foundation-sites/scss/components/tooltip';
@mixin foundation-everything($flex: false) {
@if $flex {
\$global-flexbox: true !global;
}
@include foundation-global-styles;
@if not \$flex {
@include foundation-grid;
}
@else {
@include foundation-flex-grid;
}
@include foundation-typography;
@include foundation-forms;
@include foundation-button;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-card;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-responsive-embed;
@include foundation-label;
@include foundation-media-object;
@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;
@include foundation-visibility-classes;
@include foundation-float-classes;
@if \$flex {
@include foundation-flex-classes;
}
}
@include foundation-everything(true);
Rename the /src/styles.sass
file to have the SCSS file extension: /src/styles.scss
.
Open angular-cli.json
in the root directory of the app and, under apps.styles
, change "styles.sass"
to "styles.scss"
.
In angular-cli.json
, change defaults.styleExt
from "sass"
to "scss"
.
Run the project with the ng serve
command. The Foundation for Sites styles should be applied to your HTML, which you can view by directing your browser to http://localhost:4200
.