LoginSignup
0
0

More than 1 year has passed since last update.

Rails: assets pipelineでrequire_tree . から特定のファイルを除く

Posted at

プロジェクトの開始時に、app/assets/styleseets下のapplication.cssに、深く考えずにrequire_tree .と書くと、あとで「しまった、ディレクトリ分けしておけばよかった」となります。

app/assets/styleseets/application.css
/*
 *= require font-awesome
 *= require_tree .
 *= require_self
 */

こう書けば、CSSの使い分けができたのに。

app/assets/styleseets/application.css
/*
 *= require_tree ./main
 */
app/assets/styleseets/admin.css
/*
 *= require_tree ./admin
 */
config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( admin.css )

しかし、プロジェクト開始から時間が経ち、styleseetsディレクトリがごちゃごちゃで手を付けられない状態です。

そんなときは、Sprocketsの機能stubを使います。これで、application.cssからadmin.cssおよびadmin.cssがrequireしているCSS(adminディレクトリ下のCSS)が除外されます。

app/assets/styleseets/application.css
/*
 *= require font-awesome
 *= require_tree .
 *= require_self
 *= stub ./admin
 */
app/assets/styleseets/admin.css
/*
 *= require_tree ./admin
 */

注意する点は、admin.cssおよびadmin.cssがrequireしているCSSに、application.cssで使っているものが含まれると、それも除かれることです。次の例では、application.cssからfont-awesomeが消えます。

app/assets/styleseets/admin/admin.css
/*
 *= require font-awesome
*/

application.cssとadmin.cssでCSSを共有したいときは、拡張子をscssにして@importを使います。

app/assets/styleseets/admin/admin.scss
@import 'font-awesome';
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0