2012-01-16 16 views
15

アセットパイプラインを使用するためにたくさんのSCSSスタイルシートを持つレールアプリをアップグレードしており、各ファイルにいくつかのグローバル変数とミックスインを含める必要があります。変数があるので、これは、もちろん動作しませんrailsのアセットパイプラインでSCSS変数を保持していますか?

# application.css 
/* 
*= require variables 
*= require mixins 
*= require_tree . 
*/ 

:すべてのファイルの先頭にあるいくつかの@importディレクティブは非常に乾燥していないので、私はこのような何かをしたいの追加

ファイル間で永続化されません。誰でもこれを達成する方法を知っていますか?

答えて

34

デフォルトマニフェストの構文はあなたを与えるのに十分強力ではありませんが便利なサス特徴とする代わりなど共有変数、ミックスインなど、あなたをべき:

  1. 名前の変更がapplication.scss(またはRailsの4またはそれ以前でapplication.css.scss)するapplication.css
  2. 代わり

    /* 
    *= require variables 
    *= require mixins 
    *= require_tree . 
    */ 
    

    ナンセンスを使用して、あなたが今使用する必要があります

    @import "variables"; 
    @import "mixins"; 
    @import "blah"; // import each SCSS file in your project like this. 
    

    これにより、プロジェクト全体で変数とミックスインが最大限に活用され、サスペクトsは許す。

+0

合意。これは私がやっていることです。 – Zubin

+2

この解決策を指摘する価値があるのは、すべてのCSSが1つのファイルで終わることです。 application.cssのアイデアは、あなたのネットワークトラフィックに含まれるすべてのファイルを知っているので、QAの助けとなる個々のcssファイルを別々に(devで)読み込むということです。 (SASSによって追加されたコメントで、問題を検査し、.scssファイルを参照することができます) – gcoladarci

+1

私はあなたがソース出力マップを出力することができると信じています(http://fonicmonkey.net/2013/03/25/ native-sass-scss-source-map-support-in-chrome-and-rails /)を使用すると、ソースファイルを直接検査することができます。 –

2

そうではないようです。それぞれのファイルの先頭に@import 'includes/all';、それ以外にはすべてincludes/all.css.scssが含まれていました。

5

それぞれのScssファイルまたはSassファイルから必要なファイルをインポートするだけで、私のために働いたようです。いくつかの他のファイルと一緒にマニフェスト私のapplication.cssで、私はそれを必要と

$black: #222; 

:私のボタンで

/* 
*= require colors 
*= require buttons 
*/ 

例えば、私はcolors.scssのこのようないくつかの定数を含むファイルを持っています。 css.scssファイルには、私は単にエラーを回避するために、この操作を行います。

@import "colors"; 
+0

ここにあるドキュメントも役立ちます。https://github.com/rails/sass-rails/ –

+2

これで問題は解決しません。目標は、各scssファイルからそれらをインポートする必要性を避けることでした。あなたの答えは私のものと同じです。とにかくありがとう:) – Zubin

関連する問題