2017-02-07 12 views
2

Обзор

Я люблю новый Угловое 2 CLI, я был в состоянии перенести свою старую структуру фронта в это просто отлично. У меня, однако, были проблемы с получением Susy (http://susy.oddbird.net/) для загрузки. Это драгоценный камень, который установлен и может использоваться в качестве смесителя.Как использовать Сюзи в угловых 2 CLI

Я подумал, что это может быть проблема с тем, как я использую mixins, но я попробовал пользовательский mixin, и он работал нормально.

Так что я сделал следующее:

Установка

Installed ПРВЖ:

gem install susy

NPM Установка: npm install susy sass-loader --save-dev

импортированного сУсИ в .src/стилей. scss

@import "~susy/sass/susy";

включил его в .src/приложение/app.component.scss

@include container;

когда я бегу ng serve я получаю следующее сообщение об ошибке:

ERROR in ./src/app/app.component.scss 
Module build failed: 
    @include container; 
     ^
     No mixin named container 

Backtrace: 
    stdin:2 
     in /Users/allie.munro/Desktop/angular-cli/src/app/app.component.scss (line 2, column 11) 
@ ./src/app/app.component.ts 19:21-52 
@ ./src/app/app.module.ts 
@ ./src/main.ts 
@ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts 

Вопрос

Кто-нибудь видит, что я сделал неправильно или пропустил при установке Susy in An gular2 CLI? В документации говорится о внесении изменений в файл webpack, но это не входит в структуру папок, которую предоставляет ng new appname. Я уверен, что могу найти его в папке node_modules, но это для меня не похоже на лучшую практику.

+0

Посмотрите раздел «сборка сторонних библиотек» файла readme проектов и посмотрите, поможет ли это вам: https://github.com/angular/angular-cli#3rd-party-library- установка –

+0

Спасибо, к сожалению, это не поможет. Как кто-то имел успех в добавлении каких-либо миксинов, таких как компас, susy, breakpoint. Все они не работают для меня. – Bromox

+0

Хорошо, я бы попробовал следующее: перейдите в https://gitter.im/angular/home и задайте вопрос в угловой или угловой комнате –

ответ

2

Я следовал за вашим примером и получил его для работы, за исключением того, что импорт должен быть помещен в .scss, который использует микшины. В вашем примере вам просто нужно использовать оператор import в файле app.scss, и контейнер mixin будет работать.

Я считаю, что каждый файл scss скомпилирован отдельно и привязан к каждому компоненту. Поэтому, если вы хотите использовать сетку susy, глобально импортируйте ее в главные styles.scss. Если вам нужны сухие микшины в вашем приложении, вам также нужно будет импортировать их.

К сожалению, я не был успешным каким-либо другим способом.