Rails 3.1 - forcer le rafraîchissement de la valeur de la variable SCSS?

Question

J'ai mis en place un ensemble de styles [object] .css.scss dans mon répertoire assets/stylesheets pour correspondre aux différentes vues de mon application. Chaque feuille comprend un ensemble de valeurs variables de style global dans la première ligne:

@import "branding.css.scss"; 

et accède ensuite les valeurs des variables en cas de besoin ($ primaryColor, secondaryColor $, etc.) tout au long de la bibliothèque.

Il est magnifiquement sec, mais malheureusement, Rails n'actualise pas les feuilles de style d'objet lorsque je modifie les valeurs des variables dans le fichier _branding.css.scss. Je dois aller et toucher chaque fichier avant que le SCSS recompile la bibliothèque de style d'objet avec la valeur de variable mise à jour.

C'est un petit reproche, mais il est perturbateur pour le flux de travail, surtout quand je continue à vider le cache du navigateur essayer de le réparer:/

Y at-il une meilleure façon d'organiser les variables?

Existe-t-il un moyen de forcer l'actualisation?

Answer 1

Ceci est en effet très gênant ...

Je n'ai pas une solution complète, mais une chose que j'ai trouvé est que tout ce que vous devez faire est de toucher « application.css.scss » pour obtenir il recompile tout.

J'ai commencé à utiliser guard-compass et guard-livereload récemment, mais il a le même problème en 3.1. Peut-être que quelqu'un de plus intelligent que moi pourrait le réparer afin qu'il touche aussi 'application.css.scss'?

Answer 2

J'ai mis des variables et des mixins dans un fichier includes.css.scss et je les ai importés dans chaque feuille de style qui les requiert. Pour que Rails soit recompilé lorsque le fichier includes est modifié, vous devez utiliser la directive depend_on dans application.js. Par exemple:

application.css:

/* 
    *= depend_on includes 
    *= require_self 
    *= require stylesheet 
*/ 

includes.css.scss:

$bg-color: #999; 

stylesheet.css.scss:

@import "includes.css.scss"; 

body { background: $bg-color; }