Mam więc app/assets/stylesheets/
strukturę katalogów, która wygląda mniej więcej tak:
|-dialogs
|-mixins
|---buttons
|---gradients
|---vendor_support
|---widgets
|-pages
|-structure
|-ui_elements
W każdym katalogu znajduje się wiele części sass (zwykle * .css.scss, ale jeden lub dwa * .css.scss.erb).
Mogę dużo przypuszczać, ale rails POWINNY automatycznie kompilować wszystkie pliki w tych katalogach z powodu *= require_tree .
w application.css, prawda?
Niedawno próbowałem zmienić te pliki, usuwając wszystkie zmienne kolorów i umieszczając je w pliku w app/assets/stylesheets
folderze głównym (_colors.css.scss). Następnie utworzyłem plik w app/assets/stylesheets
folderze głównym o nazwie master.css.scss, który wygląda następująco:
// Color Palette
@import "colors";
// Mixins
@import "mixins/buttons/standard_button";
@import "mixins/gradients/table_header_fade";
@import "mixins/vendor_support/rounded_corners";
@import "mixins/vendor_support/rounded_corners_top";
@import "mixins/vendor_support/box_shadow";
@import "mixins/vendor_support/opacity";
Nie bardzo rozumiem, jak rails radzą sobie z porządkiem kompilacji zasobów, ale oczywiście nie jest to na moją korzyść. Wygląda na to, że żaden z plików nie zdaje sobie sprawy, że ma importowane zmienne lub miksy, więc generuje błędy i nie mogę skompilować.
Undefined variable: "$dialog_divider_color".
(in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb)
Undefined mixin 'rounded_corners'.
(in /home/blah/app/assets/stylesheets/widgets.css.scss)
Zmienna $dialog_divider_color
jest jasno zdefiniowana w _colors.css.scss i _master.css.scss
importuje kolory oraz wszystkie moje miksy. Ale najwyraźniej rails nie dostały tej notatki.
Czy istnieje sposób, w jaki mogę naprawić te błędy, czy też będę musiał uciec się do umieszczenia wszystkich moich definicji zmiennych z powrotem w każdym pojedynczym pliku, jak również wszystkich importowanych plików mixin?
Niestety, ten facet nie wydaje się sądzić, że to możliwe, ale mam nadzieję, że się myli. Wszelkie myśli są mile widziane.
źródło
application.css
i zmień nazwę naapplication.scss
. Ponieważrequire_tree
zawiera wszystko i zwykle chcesz kontrolować zamówienieaby używać zmiennych itp. między plikami, musisz użyć dyrektywy @import. pliki są importowane w określonej kolejności.
następnie użyj application.css, aby zażądać pliku, który deklaruje import. to jest sposób na osiągnięcie pożądanej kontroli.
na koniec w swoim pliku layout.erb możesz określić, który "główny" plik css ma być używany
przykład będzie bardziej pomocny:
załóżmy, że masz w swojej aplikacji dwa moduły, które wymagają różnych zestawów CSS: „aplikacja” i „admin”
pliki
|-app/ |-- assets/ |--- stylesheets/ | // the "master" files that will be called by the layout |---- application.css |---- application_admin.css | | // the files that contain styles |---- config.scss |---- styles.scss |---- admin_styles.scss | | // the files that define the imports |---- app_imports.scss |---- admin_imports.scss | | |-- views/ |--- layouts/ |---- admin.html.haml |---- application.html.haml
tak wyglądają pliki w środku:
-------- THE STYLES -- config.scss // declare variables and mixins $font-size: 20px; -- app_imports.scss // using imports lets you use variables from `config` in `styles` @import 'config' @import 'styles' -- admin_imports.scss // for admin module, we import an additional stylesheet @import 'config' @import 'styles' @import 'admin_styles' -- application.css // in the master application file, we require the imports *= require app_imports *= require some_other_stylesheet_like_a_plugin *= require_self -- application_admin.css // in the master admin file, we require the admin imports *= require admin_imports *= require some_other_stylesheet_like_a_plugin *= require_self -------- THE LAYOUTS -- application.html.haml // in the application layout, we call the master css file = stylesheet_link_tag "application", media: "all" -- admin.html.haml // in the admin layout, we call the admin master css file = stylesheet_link_tag "application_admin", media: "all"
źródło
Utwórz następującą strukturę folderów:
+ assets | --+ base | | | --+ mixins (with subfolders as noted in your question) | --+ styles | --+ ...
W folderze
base
utwórz plik „globals.css.scss”. W tym pliku zadeklaruj wszystkie swoje importy:@import 'base/colors'; @import 'base/mixins/...'; @import 'base/mixins/...';
W twoim application.css.scss powinieneś mieć:
*= require_self *= depends_on ./base/globals.css.scss *= require_tree ./styles
I na koniec (to jest ważne), zadeklaruj
@import 'base/globals'
w każdym pliku stylu, w którym chcesz używać zmiennych lub miksów. Możesz wziąć to pod uwagę, ale w rzeczywistości podoba mi się pomysł, że musisz deklarować zależności swoich stylów w każdym pliku. Oczywiście ważne jest, aby importować tylko elementy mieszane i zmienne w pliku globals.css.scss, ponieważ nie dodają one definicji stylów. W przeciwnym razie definicje stylów zostałyby dołączone wiele razy w twoim prekompilowanym pliku ...źródło
Zgodnie z tym pytaniem możesz używać TYLKO
application.css.sass
w celu zdefiniowania importu i udostępniania zmiennych między szablonami.=> Wydaje się, że to tylko kwestia nazwy.
Innym sposobem może być uwzględnienie wszystkiego i wyłączenie tego potoku .
źródło
Miałem bardzo podobny problem. Pomogło mi wstawienie podkreślenia do instrukcji @import podczas importowania części. Więc
@import "_base";
zamiast
@import "base";
To może być dziwny błąd ...
źródło