npmから取ってきたBootstrapをBrunchを通してPhoenixで使ったりした

昨日は老いを感じるエントリを書きました。

懲りずにまた作り直しをちょこちょこと始めたのですが、やっぱりElixir楽しいですね、はい。

Rails Tutorialはこれで3回目くらいですが、昔やってたゲームを引っ張り出してきたような懐かしさが少しあります。

www.railstutorial.org

序盤に静的ページをつくったあと、Twitter Bootstrapを導入するくだりがあります。Phoenixはminify済みのBootstrapをapp.cssに書いておいてくれるので何もしなくていいのですが、そうじゃなくてnpmから取ってくる方がバージョン上げたいときによいのではないかと。4.0がalphaですし。

手順

今後bootstrapをガリガリ使うことはあんまり無さそうですが、簡単だと思ったら時間かかったので手順を書いておきます。

$ npm i -S bootstrap-sass sass-brunch jquery copycat-brunch

// brunch-config.js

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    assets: /^(web\/static\/assets)/
  },

  paths: {
    watched: [
      "web/static",
      "test/static"
    ],

    public: "priv/static"
  },

  plugins: {
    babel: {
      ignore: [/web\/static\/vendor/]
    },
    sass: {
      options: {
        includePaths: ["node_modules/bootstrap-sass/assets/stylesheets"],
        precision: 8
      }
    },
    copycat: {
      "fonts": ["node_modules/bootstrap-sass/assets/fonts/bootstrap"]
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": [
        "bootstrap-sass",
        "web/static/js/app"
      ]
    }
  },

  npm: {
    enabled: true,
    whitelist: ["phoenix", "phoenix_html", "jquery", "bootstrap-sass"],
    globals: {
      $: 'jquery',
      jQuery: 'jquery'
    }
  }
};

/* web/static/css/app.scss */

$icon-font-path: "/fonts/";
@import "bootstrap";

Phoenixのバージョンは1.1.4でした。