Фонд не работает в Angular 6 - PullRequest
Новая
       9

Фонд не работает в Angular 6

0 голосов
/ 03 июня 2018

Итак, я создал новый проект в 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';

Мой шаблон не показывает никаких изменений фундамента при загрузке.а также это дает мне сообщение об ошибке, говоря, что глобальные переменные, которые я использую, не найдены, но когда я импортирую эту же строку в дочерний компонент, где я использую глобальные переменные, он не жалуется, но и глобальные переменные, я полагаю,передается, когда ошибка исчезает, но на основу не влияет фундамент, и она выглядит очень некрасиво, помогите.

1 Ответ

0 голосов
/ 03 июня 2018

В каталоге src / assets / создайте каталог с именем foundation-sites с пустыми файлами с именем: _settings.scssand _global.scss.

В файле _global.scssfile вставьте содержимое из: node_modules / foundation-sites / scss / _global.scss.

В файле _settings.scssfile вставьте содержимое из: node_modules / foundation-sites / scss / settings / _settings.scss.

В _settings.scssfileнайдите строку с @import 'util / util' и измените ее так, чтобы она указывала на правильный каталог: @import '../node_modules/foundation-sites/scss/util/util';

В src/styles.sass, добавьте операторы импорта из node_modules / foundation-sites / scss / foundation.scss, скорректировав путь к каталогу, как в примере ниже.Обратите внимание, что мы используем наши пользовательские настройки и глобальные файлы, которые мы поместили в каталог 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 (если angular <6) или angular.json (если angular 6+) измените defaults.styleExt с «sass» на «scss». </p>

...