複数のRailsプロジェクトで共有しているscssをgem化した話

背景

昔々、Bootstrapのようなscssフレームワーク社内で自作し、複数のRailsプロジェクトでフレームワークを共有している会社がありました。

SCSSファイルを生で置いておくと編集されてしまいプロジェクトごとに差分が発生する。CSS化するとScssの変数が使えず不便だし、部分的にインポートするのも大変ということでSCSSの管理が問題になっていました。

なにやったのか

gem化しました

複数のリポジトリで管理するのは大変なのでパッケージ化してしまえということでgemでパッケージ化を行いました。
SCSSフレームワークに変更がある度にgemのバージョンを変えていくという方法を採用しています。

なぜgemかというと、bowerやnpmのようなパッケージマネージャーも候補にいれたのですが、rails newでデフォルトで作成されるGemfileに記述出来た方が、プロジェクトを進めやすいと考えたからです。sprocketで行う方法は考えませんでした。

gemでやってること

• gemの中にScssを突っ込む
• sass_pathを弄る

gemの中でやることは簡単でgemの中にscssファイルを突っ込んであげて、そのディレクトリ(今回はapp/assets/stylesheets)をsassのload_pathsに追加してあげるだけです。
sassのload_pathsに追加してあげることで、scssファイルを読みこんでくれます。

require "gem_name/version"
require "sass"

module GemName
  Sass.load_paths << File.expand_path("../../app/assets/stylesheets", __FILE__)
end

恩恵は?

gem_name/app/assets/stylesheets/shared_scss/base/_reboot.scss
gem_name/app/assets/stylesheets/shared_scss/component/_button.scss
gem_name/app/assets/stylesheets/shared_scss/component/_form.scss

上のようなディレクトリ構成があるとapp/assets/stylesheets/をload_pathsに追加しておくと下のような書き方で読み込むことが可能になります。
プロジェクト内で定義した変数をgemの中のscssで使うことも可能なので、プロジェクトによってテーマ変更も可能です。

プロジェクト内のscss

$brand-color: #428b09;
@import 'shared_scss/base/reboot';
@import 'shared_scss/component/button', 'shared_scss/component/form';

注) shared_scssというディレクトリ名はgemから呼び出したということを明示するためにつけたものです。

感想

これから運用してみる予定です。このCSSに関しては変更が少ないので問題は少ないと思いますが、変更の多いCSSに関しては毎回gemのアップデートを行うのは面倒な気がします。
ただ、このようなgemをプロジェクトに使うだけでフロントエンドがスタートダッシュを決められるというのは重要なので、このような取り組みを進めていきたいと思います。

今後の展望としてはスタイルガイドもgemの中に突っ込んで「開発環境で見れます」的なことしたいです。

試したい方へ

リポジトリ作って置いておきました
https://github.com/mottox2/shared-sass

使い方

1. forkして、app/assets/stylesheets内に共有したいGemを置く
2. 使いたいプロジェクトのGemfileにgem 'shared_sass', github: 'your_name/shared_sass' と書いてbundle install
3. 適宜scssファイル内でimportする。