/ / Rails Sass: premenné nie sú odovzdávané s @import - css, ruby-on-rails, ruby, twitter-bootstrap, sass

Rails Sass: premenné sa nepodávajú s @import - css, ruby-on-rail, ruby, twitter-bootstrap, sass

Mám projekt koľajníc, ktorý používa Twitterbootstrap a sass. Scss súbory sú štruktúrované do priečinkov, takže mám lepší prehľad. Teraz chcem definovať súbor pre globálne premenné, ktorý obsahuje moje farby atď. A odovzdať tieto hodnoty do iných súborov, takže mám menej redundantný kód. Aj keď je všetok kód správne importovaný a aplikovaný, premenné nefungujú.

Tu je aktuálne nastavenie:

štýly / application.css.scss

/*
*= require_self
*= require_tree
*/


/*
stylesheets/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|
|– components/
|   |– _buttons.scss     # Buttons
|   |– _messages.scss    # Nachrichten
|   |– _dropdown.scss    # Dropdown
|
|– helpers/
|   |– _globals.scss     # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins
|   |– _helpers.scss     # Class & placeholders helpers

//more files omitted
|
|– vendors/
|   |– _bootstrap_and_overrides.css   # Bootstrap
|   |– _scaffolds.scss   # Bootstrap

|
|
`– main.scss             # primary Sass file
*/

Nepoužívam metódu = vyžadovať, pretože neumožňuje použitie premenných a mixínov (ktoré by som rád použil).

Tiež používam main.scss, ktorý obsahuje všetky importy. štýly / main.scss

@import "bootstrap-sprockets";
@import "bootstrap";

@import "helpers/globals";

@import "base/normalize";
@import "base/grid";
@import "base/typography";

@import "components/buttons";
@import "components/tables";
//other files omitted

Helpers / globals.scss obsahuje definície farieb: stylesheets / pomocníci / globals.scss

$background-light : #4e4d4a;

Komponent súboru / tables.scss má túto premennú používať.

.table-striped > tbody > tr:nth-child(2n+1) > {
tr, td, th {
background-color: $background-light;
}
}

Podľa väčšiny informácií na webe a na webeoficiálny sprievodca SASS by to malo fungovať, keď som deklaroval premennú a importoval súbor podľa súboru pred súborom, ktorý ho používa. Premenná sa určite nenájde: Undefined variable: "$background-light".

Celý postup sa zdá dosť jednoduchý, ale ja somdochádzajú nápady. Musím niečo nastaviť vo svojich súboroch prostredia alebo musím zmeniť svoju aplikáciu.css.scss? Alebo tu môže zavádzací systém zasahovať?

Ďakujeme vopred za vašu pomoc.

odpovede:

4 pre odpoveď č. 1

Ako som už uviedol, nedávno som mal nejaké skúsenosti s tým, že aktíva nefungujú podľa očakávania. Odporúčanie, ktoré som dostal, bolo použiť:

rake assets:clobber

Týmto sa vyčistí potrubie.

https://github.com/rails/sprockets-rails/blob/master/README.md


9 pre odpoveď č. 2

Skúste odstrániť *= require_tree z vášho application.css.scss, Použitím require nefunguje dobre so súbormi sass, najmä v kombinácii s @import.

Nezabudnite importovať / vyžadovať vaše main.scss súbor, keď odstránite requ_tree.

https://github.com/rails/sass-rails#important-note