szyny 4 i kompas, jak importować tylko jeden raz moje pliki sass? - css, ruby-on-rails-4, sass, kompas-sass, kompas

Mam projekt rail 4 z „stylesheets / application / index.css.scss” z moimi wszystkimi plikami css:

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

szyny kompilują wszystkie css tylko w jednym, zminimalizowane (w prod).

Muszę zaimportować @import "shared/header" w wielu plikach.

przykład: w „stylesheets / layout / main.css.scss”

@import "shared/header";

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

ale ja @import "shared/header" w innych plikach też. Wynik to :

gdy szyny kompilują się tylko w jednym pliku, istnieją wielokrotnie te same reguły „.header_common_overview”, ponieważ importuję je w różnych plikach.

Próbowałem umieścić instrukcję „import” bezpośrednio w index.css.scss, ale to działa.

Jak więc mogę zaimportować tylko jeden plik i móc wywoływać zawartość we wszystkich innych plikach?

Odpowiedzi:

1 dla odpowiedzi № 1

Po pierwsze, nie używaj require_tree . Tracisz kontrolę nad kolejnością dołączania plików CSS, potencjalnie prowadząc do problemów kaskadowych - style nadpisywane, które naprawdę nie powinny być.

„Nauczyłem się unikać kół zębatych” require wiersze w głównych plikach SASS z powodów podobnych do opisywanych.

• Może to prowadzić do powielania, szczególnie podczas używania =require_tree wszędzie wokoło
• Zmienne / mixins / etc ... nie mogą być włączone przez koła zębate (Chciałbym jednak udowodnić, że się mylę)

W Twoim index.css.scss możesz rozważyć po prostu wprowadzenie

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

// Your main styling here.

@import "another_file";

Te @import linie odpowiadają innym plikom Sass. shared.css.scss na przykład może wyglądać

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

Chodzi o to

1. Zachowaj czystą separację / organizację swoich aktywów
2. Jawnie zdefiniuj każdy zasób, aby zachować pełną kontrolę nad zamówieniem
3. Użyj SASS @importzamiast kół zębatych =require dyrektywa, aby zachować zmienne, miksy itp. w dołączonym pliku dostępnym w całym tekście.

---

0 dla odpowiedzi nr 2

Moje rozwiązanie to: utwórz all.css.scss za pomocą:

/*
*= 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)

Zamówienie jest szanowane i kontrolowane.

Dołączone pliki są dostępne tylko raz

dołączone pliki są udostępniane w każdym rzeczywistym pliku css.

thx o pomoc.

---