Cloud9上でYarnを使ってbootstrap material designを導入する

3495 ワード
Bootstrap Node.js YARN AWSCloud9 Node.js テキストリンク

初心者のメンターをしている時に、環境がcloud9を使っている状況で、yarnを用いてbootstrapを導入する機会がありました。少し詰まりかけた部分があったのと、あまり記事がなかったので、備忘録で書きます。

環境

windows(64bit)
ruby 2.6.4
Rails 5.2.4
Cloud9上で開発

Node.jsのバージョンアップ

Nodeのstableなバージョンをインストールします。

$ nvm install stable

Yarnのインストール

$ npm install -g yarn

bootstrap material designを導入

package.jsonを生成するために以下のコマンド実行

$ yarn init

bootstrap material designを追加

$ yarn add bootstrap-material-design

インストール

$ yarn install

マニフェストファイルへ読み込みのpathを記載

app/assets/javascripts/application.js

//= require bootstrap-material-design/dist/js/bootstrap-material-design.js
app/assets/stylesheets/application.scss
@import 'bootstrap-material-design/dist/css/bootstrap-material-design';
@import 'font-awesome-sprockets';
@import 'font-awesome';

ここまでブラウザ画面で確認しても、

Sass::SyntaxError

が出る。

config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('node_modules')

こちらの記載でファイルが読み込めるように設定。

サーバーを再起動すれば、無事表示！