所以我在Angular中建立了一个基础scss的新项目，
在我的angular.json中，我有这个。
"styles": [
"src/styles.scss
],
在我的styles.scss中我有这个
/* You can add global styles to this file, and also import other style files*/
@import '@foundation-sites/scss/foundation';
我加载时，我的模板没有显示任何基础更改。并且它给了我和错误说我找不到的全局变量，但是当我在子组件中导入同一行我使用全局变量时，它不会抱怨但是全局变量，我猜是错误消失后传递，但模板不受基础影响，看起来非常难看，帮助。
答案 0 :(得分：0)
在src / assets /目录中，使用名为：_settings.scss和_global.scss的空文件创建名为foundation-sites的目录。
在_global.scss文件中，粘贴以下内容：node_modules / foundation-sites / scss / _global.scss。
在_settings.scss文件中，粘贴以下内容：node_modules / foundation-sites / scss / settings / _settings.scss。
在_settings.scss文件中，找到带有@import'util / util'的行;并将其更改为指向正确的目录： @import'../ node_modules / foundation-sites / scss / util / util';
在src / styles.sass中，从node_modules / foundation-sites / scss / foundation.scss添加import语句，调整目录路径，如下例所示。请注意，我们使用的是我们在src / assets / foundation-sitesdirectory中放置的自定义设置和全局文件。
/**
* 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);
将/src/styles.sassfile重命名为SCSS文件扩展名：/src/styles.scss。
在应用的根目录中打开angular-cli.json，在apps.styles下，将“styles.sass”更改为“styles.scss”。
在angular-cli.json中（如果有角度＆lt; 6）或angular.json（如果有角度6+） 将defaults.styleExtfrom“sass”更改为“scss”。