Изолировать файлы SCSS из Foundation 6 для включения в проект моего веб-разработчика

Question

У меня есть существующий проект веб-сайта (PHP, Visual Studio, jQuery), и я хотел бы начать использовать некоторые функциональные возможности/дизайн, предоставленные Foundation 6.

Я уже начал использовать Foundation 5 и просто ссылался на css и js-файлы из моего проекта. Он работал так, как ожидалось, и жизнь была хорошей.

Моя проблема возникла, когда я захотел переопределить некоторые CSS. Я начал с простого переопределения классов в моем собственном файле CSS. Это сработало, и жизнь была хорошей. Но я понимаю, что это не лучший способ сделать это, с точки зрения ремонтопригодности. Поэтому я начал погружаться в SASS/SCSS. Казалось, что Фонд 6 - это путь. Я установил всевозможные вещи, чтобы заставить его работать ... узел, рубин, драгоценные камни, CLI Foundation и, возможно, некоторые другие, которые ускользают от меня в данный момент.

Я создал новый проект Фонда, чтобы я мог выделить необходимые файлы и включить их в проект VS. Я, как бы наивно не понял, что могу копировать необходимые файлы css, scss и js в мой проект VS, а затем, когда я отредактировал scss-файл (ы), я мог бы скомпилировать их в css. (Компиляция может выполняться любым количеством способов, от командной строки sass до VS-расширений).

Но единственные SCSS файлы, которые я нашел в созданном проекте были

• _settings.scss
• app.scss

Когда я попытался собрать app.scss, я получил сообщение об ошибке : «файл для импорта не найден или нечитаемый: функции», и поэтому я пошел искать пропавший файл, но не могу найти его нигде.

Я просмотрел папку bower_components и нашел там целую кучу scss-файлов, но ни один из них не назвал функциями.

Есть ли где-нибудь я могу легко получить все scss-файлы, необходимые для компиляции моих настроек в CSS Foundation?

Вопрос о бонусе: Я полностью задумался над тем, чтобы развиваться таким образом, вместо того, чтобы подписываться на весь комплект-и-kaboodle способа создания Фонда с точки зрения проекта?

Answer 1

Похоже, что Фонд 6 отличается от Фонда 5 по отношению к CSS, SCSS и переопределению стилей. В версии 5 файлы Foundation включали несколько базовых файлов scss, которые предоставляли средства для легкого переопределения классов.

В Foundation 6 все работает по-разному. Существует более 100 файлов SCSS, и все они необходимы при настройке файла _settings.scss, так как все они используются при компиляции окончательного файла app.css.

Чтобы ответить на мой собственный вопрос, не может быть сделано, и/или, это не работает.

Моим окончательным решением было создать новый шаблон Foundation 6 в моей существующей структуре папок проекта Visual Studio. Затем я включил необходимые файлы scss (_settings.scss и app.scss) в свой проект и контроль источника.

Эта конфигурация позволяет мне редактировать scss-файлы в Visual Studio и разрешать Foundation и т. Д. (Используя команду foundation watch) компилировать эти изменения в окончательный css, используемый остальной частью моего проекта.

Немного гибридный подход, но в конечном счете он эффективен и достаточно прост в обслуживании.