3

これらは私のページに含まれているスタイルです（一番上のスタイルは本番環境でエラーが発生します） 

<link href="/assets/foundation.css" rel="stylesheet" type="text/css" />
<link href="/assets/app.css" rel="stylesheet" type="text/css" />
<link href="/assets/full_size.css" media="screen and (min-width: 761px)" rel="stylesheet" type="text/css" />
<link href="/assets/mobile_size.css" media="screen and (max-width: 760px)"   rel="stylesheet" type="text/css" />

<link href="/assets/application-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-cd6a361c13ee838fceb09ecb2c58c467.js" type="text/javascript"></script>

私のウェブサイトはレスポンシブなので、画面のサイズに基づいて必要に応じてスタイルを含める必要があります。次のように、CSSを個別に事前コンパイルする方法はありますか？

<link href="/assets/foundation-b0a44b2bbc0d3c94d855fbb830c2098d.css" rel="stylesheet" type="text/css" />
<link href="/assets/app-b0a44b2bbc0d3c94d855fbb830c2098d.css" rel="stylesheet" type="text/css" />
<link href="/assets/full_size-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen and (min-width: 761px)" rel="stylesheet" type="text/css" />
<link href="/assets/mobile_size-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen and (max-width: 760px)"   rel="stylesheet" type="text/css" />

そうすれば、application.cssは必要なくなります。また、それをすべて組み合わせると、私のcssが壊れます。私のウェブサイトは開発が良さそうだった:)

今のところ、config/application.rbでivesetconfig.assets.enabled = falseの場合、cssを圧縮して、自分で手動で含める方がよいでしょうか？

これは、私が答えのどれも好きではないことを除いて、この質問にいくぶん似ています。確かにこれには簡単な解決策があります。 Rails3.1アセットパイプラインを使用して特定のCSSを条件付きで使用する

4

1 に答える 1

1

一般的にアセットパイプラインを使用するために間違った方向を向いていると思います。パイプラインを使用しようとしている場合は、保持する必要がありますapplication.css-これはマニフェストファイルであり、cssファイルを含めるために使用します。私のアドバイスはlink href=、ビューから移動して、次のようにマニフェストファイル（application.css）を使用することです。

*= require_self
*= require foundation
*= require mobile_size

....
*= require_tree

現在含まれているのは、プリコンパイルされたcssファイル（ハッシュプレフィックスに注意）であり、アセットを変更するたびに、ハッシュプレフィックスが変更されます。

同じことがファイルの状況です-マニフェストファイル.jsにそれらを含める必要があります。application.js

編集：SASS（3.2）とメディアクエリ（このCSSトリックの記事で説明されているように、@ pennerに関して）を使用するというアイデアは、この場合にうまく適合します。

于 2013-01-25T09:01:51.147 に答える