npmから取ってきたBootstrapをBrunchを通してPhoenixで使ったりした
昨日は老いを感じるエントリを書きました。
懲りずにまた作り直しをちょこちょこと始めたのですが、やっぱりElixir楽しいですね、はい。
Rails Tutorialはこれで3回目くらいですが、昔やってたゲームを引っ張り出してきたような懐かしさが少しあります。
序盤に静的ページをつくったあと、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でした。