Ruby on Rails - Material Design

README.md

See also https://material.io/

$ rails new my-app --webpack

$ bundle --binstubs

config/webpack/loaders/sass.js

// https://github.com/rails/webpacker/issues/454#issuecomment-370158350
const cssLoader = require('@rails/webpacker/package/rules/css')
const cloneDeep = require('lodash/fp/cloneDeep')
const deepMerge = require('@rails/webpacker/package/utils/deep_merge')

let sassLoader = cloneDeep(cssLoader)
module.exports = deepMerge(sassLoader, {
  test: /\.(scss|sass)$/i,
  use: [{
    loader: 'sass-loader',
    options: {
      includePaths: ['node_modules'],
      sourceMap: true,
    },
  }]
})

config/webpack/environment.js

...
const sass = require('./loaders/sass')

environment.loaders.append('sass', sass)
...

app/javascript/packs/styles.scss

@import "~@material/button/mdc-button";

.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}

$ bin/rails g controller welcome index

config/routes.rb

root 'welcome#index'

app/views/layouts/application.html.erb

<%= javascript_pack_tag 'styles', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

$ bin/rails s