rails 4 і компас, як імпортувати тільки один раз мої файли sass? - css, ruby-on-rails-4, sass, компас-сас, компас

У мене є проект rail 4 із "таблицями стилів / application / index.css.scss" із усіма моїми файлами css:

 /*
*= require jquery.ui.all
*= require_tree ../shared
*= require_tree ../design
*= require_tree ../layout
*= require_self
*= require_tree .
*/

rails компілює всі css лише в одному, зведено до мінімуму (у прод.).

Мені потрібно імпортувати @import "shared/header" у багатьох файлах.

приклад: у "таблицях стилів / layout / main.css.scss"

@import "shared/header";

.header
{
@extend .header_common_overview;
[...]
}

але я @import "shared/header" в інших файлах теж. Результат:

коли рейки компілюються лише в одному файлі, багато разів існують однакові правила ".header_common_overview", оскільки я імпортую їх у різні файли.

Я намагався розмістити інструкцію "імпорту" безпосередньо в index.css.scss, але це не працює.

Тож як я можу імпортувати файл лише один раз і бути здатним викликати вміст усіх інших файлів?

Відповіді:

1 для відповіді № 1

По-перше, не використовуйте require_tree . Ви втрачаєте контроль над порядком включення ваших файлів CSS, що потенційно може призвести до каскадних проблем - стилі переписуються, що насправді не повинно бути.

Я "навчився уникати зірочок" require рядки в основних файлах SASS з причин, подібних до описаних вами.

• Це може призвести до дублювання, особливо при використанні =require_tree повсюдно
• Змінні / міксини / тощо ... не можуть бути включені через зірочки (Хоча я хотів би, щоб з цим довели, що я неправий)

У твоїй index.css.scss Ви можете просто розглянути

@import "vendor";
@import "shared";
@import "design";
@import "layout";

// Your main styling here.

@import "another_file";

Це @import рядки відповідають іншим файлам sass. shared.css.scss наприклад, може виглядати так

/*
*=require ./shared/header
*/

Ідея полягає в тому, щоб

1. Слідкуйте за чистотою поділу / організації вашого активу
2. Явно визначте кожен об’єкт включення, щоб ви зберігали повний контроль над порядком включення
3. Використовуйте SASS @importзамість Зірочок =require директива зберігати змінні, мікшини тощо ... у наявному файлі, що входить до складу.

---

0 для відповіді № 2

Моє рішення: створити all.css.scss за допомогою:

/*
*= require jquery.ui.all => static, don"t need import
*/
@import "included/**/*"; //all files included (at first time)
@import "all/**/*"; //all real css files which requires included file (in second times)

Порядок поважається і контролюється.

Включені файли присутні лише один раз

включені файли є спільними для кожного реального css-файлу.

thx для допомоги.

---