LoginSignup
3

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-02-18

初心者のメンターをしている時に、環境が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')

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

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

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
3