migrate the css pipeline to webpack (#1550)

* first commit to migrate css pipeline to webpack. fa icons dont work

* add newlines and rm link tag

* fix font awesome w/ a hack

* rm dev deps

* moved entire asset directory by accident

* rm images from mistaken dir

apps/dashboard/Gemfile

@@ -3,8 +3,6 @@ source 'https://rubygems.org'
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '6.0.4.1'
-# Use SCSS for stylesheets
-gem 'sass-rails', '~> 5.0'
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'
 # Use CoffeeScript for .coffee assets and views
@@ -47,7 +45,6 @@ end
 
 # Extra third-party gems
 gem 'dotenv-rails', '~> 2.1'
-gem 'font-awesome-sass', '5.12.0'
 gem 'redcarpet', '~> 3.3'
 gem 'browser', '~> 2.2'
 gem 'addressable', '~> 2.4'

apps/dashboard/app/javascript/packs/application.js

@@ -33,4 +33,4 @@ import 'popper.js'
 import 'bootstrap/dist/js/bootstrap'
 
 // Import application stylesheets
-require.context('../stylesheets', true)
+import '../stylesheets/application'

apps/dashboard/app/assets/stylesheets/_variables.scss.erb → apps/dashboard/app/javascript/stylesheets/_variables.scss

@@ -53,3 +53,6 @@ $navbar-nav-link-padding-x: 0.75rem;
 
 // breadcrumbs are purely visual for accessibility
 $breadcrumb-divider: '';
+
+// needs to be set by webpack
+// $fa-font-path:

apps/dashboard/app/assets/stylesheets/application.scss → apps/dashboard/app/javascript/stylesheets/application.scss

@@ -1,18 +1,12 @@
-// Load bootstrap/font-awesome sprockets first
-
 @import "variables";
 
 @import "bootstrap/scss/bootstrap";
 
 @import "custom";
 
-@import "font-awesome-sprockets";
-
 // Import Markdown styling
 @import "app_kit/markdown";
 
-//@import "awesim";
-
 //TODO:
 // overrides for navbar-default to get the same look and feel
 // this way we could have 2 different navbars on the same app
@@ -59,8 +53,13 @@ $ood-black: rgb(45, 51, 38);
 $ood-blue: rgb(0, 95, 133);
 
 
-// Load up bootstrap/font-awesome style sheet
-@import "font-awesome";
+// add font-awesome styles & fonts
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import '@fortawesome/fontawesome-free/scss/regular';
+@import '@fortawesome/fontawesome-free/scss/solid';
+@import '@fortawesome/fontawesome-free/scss/brands';
+// TODO: upgrade to fontawesome 5!
+@import '@fortawesome/fontawesome-free/scss/v4-shims';
 
 // Load up dataTables bootstrap specific styles
 @import "datatables.net-bs4/css/dataTables.bootstrap4";

apps/dashboard/app/views/layouts/application.html.erb

@@ -9,7 +9,6 @@
   <%= stylesheet_pack_tag 'application', media: 'all' %>
 
   <!-- (Legacy) Sprockets -->
-  <%= stylesheet_link_tag 'application', media: 'all' %>
   <%= javascript_include_tag 'application' %>
   <%= javascript_include_tag 'turbolinks' if Configuration.turbolinks_enabled? %>
 

apps/dashboard/config/webpack/environment.js

@@ -1,10 +1,31 @@
+// FIXME: taken from https://github.com/rails/webpacker/issues/2140
+// can't seem to get anything else to respond to the root url /pun/<thing>/<app>
+// so let's open this config up and redefine those things. We don't use or care about WEBPACKER_ASSET_HOST
+if (process.env.RAILS_RELATIVE_URL_ROOT || process.env.WEBPACKER_RELATIVE_URL_ROOT) {
+  const config = require('@rails/webpacker/package/config');
+  const path = require('path');
+  const root = process.env.WEBPACKER_RELATIVE_URL_ROOT || process.env.RAILS_RELATIVE_URL_ROOT || '/';
+  config.publicPath = path.join(root, `${config.public_output_path}/`);
+  config.publicPathWithoutCDN = path.join(root, `${config.public_output_path}/`);
+}
+
 const { environment } = require('@rails/webpacker');
 const config = environment.toWebpackConfig();
+const { merge } = require('webpack-merge');
 
 config.resolve.alias = {
  jquery: 'jquery/src/jquery',
  fa: '/app/javascript/packs/fa',
  batchConnect: '/apps/javascript/packs/batchConnect'
-}
+};
+
+const faPath = "~@fortawesome/fontawesome-free/webfonts/";
+const sassOptions = {
+  additionalData: `$fa-font-path: '${faPath}';`,
+  sourceMap: true,
+};
+
+const SASSLoader = environment.loaders.get('sass').use.find(el => el.loader === 'sass-loader');
+SASSLoader.options = merge(SASSLoader.options, sassOptions);
 
 module.exports = environment

apps/dashboard/package.json

@@ -1,6 +1,7 @@
 {
   "name": "openondemand-dashboard",
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.4",
     "@rails/webpacker": "^5.4.0",
     "bootstrap": "^4.6.0",
     "clipboard": "^2.0.8",
@@ -17,6 +18,7 @@
     "oboe": "^2.1.5",
     "popper.js": "1.14.3",
     "sweetalert2": "^10.15.7",
-    "uppy": "^1.27.0"
+    "uppy": "^1.27.0",
+    "webpack-merge": "^5.8.0"
   }
 }