Właściwa struktura aktywów SCSS w Rails

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 importowane pliki:

@import 'base/colors';
@import 'base/mixins/...';
@import 'base/mixins/...';

W aplikacji.css.scss, powinieneś wtedy mieć:

*= require_self
*= depends_on ./base/globals.css.scss
*= require_tree ./styles

I jako ostatni krok (jest to ważne) zadeklaruj @import 'base/globals' w każdym pliku stylu, w którym chcesz użyć zmiennych lub mieszanin. Możesz wziąć to pod uwagę, ale podoba mi się pomysł, że musisz deklarować zależności swoich stylów w każdym pliku. Z oczywiście ważne jest, aby importować tylko mixiny i zmienne w globalach.css.scss, ponieważ nie dodają definicji stylów. W przeciwnym razie definicje stylów będą zawarte wiele razy w wstępnie skompilowanym pliku ...

Aby używać zmiennych i takich między plikami, musisz użyć dyrektywy @ import. pliki są importowane w określonej kolejności.

Następnie użyj aplikacji.css wymaga pliku deklarującego import. to jest sposób na osiągnięcie pożądanej kontroli.

Wreszcie, w twoim układzie.plik erb, możesz określić, którego pliku css użyć

Przykład będzie bardziej pomocny:

Załóżmy, że masz dwa moduły w swojej aplikacji, 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

Oto jak 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"

Zgodnie z to pytanie , można tylko używać application.css.sass w celu zdefiniowania importu i współdzielenia zmiennych między szablonami.

= > wydaje się, że to tylko kwestia nazwy.

Innym sposobem może być dołączenie wszystkiego i wyłączenie tego potoku .

Miałem bardzo podobny problem. Pomogło mi umieszczenie podkreślenia do instrukcji @ import podczas importowania częściowego. Więc

@import "_base";

Zamiast

@import "base";