Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

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

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

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

kenkentarou
株式会社Relicで、webエンジニアやってます。副業で、株式会社WiseVineで官民連携のためのビズ側のお手伝いもしています。
https://github.com/kenkentarou
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away