move styles to webpack

app/frontend/scss/_variables.scss

@@ -1,15 +0,0 @@
-// Copyright (C) 2018 Colin Darie <colin@darie.eu>, 2018 Evolix <info@evolix.fr>
-// License: GNU AGPL-3+ (see full text in LICENSE file)
-
-$input-placeholder-color: #b9bbbb;
-$enable-rounded: false;
-$theme-colors: (
-  "primary": #118b83, //light-green
-  "secondary": #013d3a, //dark-green
-  "tertiary": #be0c04, //red
-  "quaternary": #d6b20e, // yellow
-  "success": #118b83, //light-green
-  "warning": #F6AE2D,
-  "danger": #be0c04, //red
-  "info": #2E86AB,
-);

app/frontend/scss/index.js

@@ -1,4 +0,0 @@
-// Copyright (C) 2018 Colin Darie <colin@darie.eu>, 2018 Evolix <info@evolix.fr>
-// License: GNU AGPL-3+ (see full text in LICENSE file)
-
-import './index.scss';

app/javascript/packs/application.js

@@ -6,27 +6,25 @@
 // present in this directory. You're encouraged to place your actual application logic in
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
-//
-// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
-// layout file, like app/views/layouts/application.html.erb
-
-import Rails from 'rails-ujs';
-import Turbolinks from 'turbolinks';
 
-import 'bootstrap/js/dist/collapse';
-import 'bootstrap/js/dist/dropdown';
-import 'bootstrap/js/dist/button';
-import 'bootstrap/js/dist/tooltip';
+require("@rails/ujs").start()
+require("turbolinks").start()
+// require("@rails/activestorage").start()
+// require("channels")
 
-import '../scss';
+import 'bootstrap'
+import '../stylesheets/application'
 
 import checkValidationInitialize from '../components/check_validation';
 
-Rails.start()
-Turbolinks.start()
-
 document.addEventListener("turbolinks:load", () => {
   $('[data-toggle="tooltip"]').tooltip();
 
   checkValidationInitialize();
 });
+// Uncomment to copy all static images under ../images to the output folder and reference
+// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// or the `imagePath` JavaScript helper below.
+//
+// const images = require.context('../images', true)
+// const imagePath = (name) => images(name, true)

app/javascript/stylesheets/_custom.scss

@@ -0,0 +1,15 @@
+// Copyright (C) 2018 Colin Darie <colin@darie.eu>, 2018 Evolix <info@evolix.fr>
+// License: GNU AGPL-3+ (see full text in LICENSE file)
+
+$input-placeholder-color: #b9bbbb;
+$enable-rounded: false;
+$theme-colors: (
+  "primary": #118b83,    //light-green
+  "secondary": #013d3a,  //dark-green
+  "tertiary": #be0c04,   //red
+  "quaternary": #d6b20e, //yellow
+  "success": #118b83,    //light-green
+  "warning": #F6AE2D,    //orange
+  "danger": #be0c04,     //red
+  "info": #2E86AB,       //light-blue
+);

app/frontend/scss/index.scss → app/javascript/stylesheets/application.scss

@@ -1,10 +1,9 @@
-// Copyright (C) 2018 Colin Darie <colin@darie.eu>, 2018 Evolix <info@evolix.fr>
-// License: GNU AGPL-3+ (see full text in LICENSE file)
-
-@import '_variables';
+@import '_custom';
 @import '~bootstrap/scss/bootstrap';
+
 @import 'layout';
 @import 'icons';
+
 @import 'components/callouts';
 @import 'components/users';
 @import 'components/checks';

app/frontend/scss/layout.scss → app/javascript/stylesheets/layout.scss

@@ -5,6 +5,10 @@
 @import '~bootstrap/scss/_variables';
 @import '~bootstrap/scss/mixins/_breakpoints';
 
+h2 {
+  color: red;
+}
+
 /*
 * === GENERAL ===
 */
@@ -146,7 +150,7 @@ a.navbar-item.navbar-link {
   .row {
     height: 100%;
   }
-  
+
   .homepage-img {
     border: 1px solid  map-get($theme-colors, secondary);
   }

config/webpack/environment.js

@@ -1,12 +1,11 @@
-const webpack = require('webpack')
 const { environment } = require('@rails/webpacker')
+const webpack = require('webpack')
 
 environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery',
   Popper: ['popper.js', 'default'],
-  Util: "exports-loader?Util!bootstrap/js/dist/util",
+  // Util: "exports-loader?Util!bootstrap/js/dist/util",
 }))
 
-
 module.exports = environment

package.json

@@ -4,10 +4,11 @@
   "dependencies": {
     "@rails/ujs": "^6.0.0-alpha",
     "@rails/webpacker": "^4.0.7",
-    "bootstrap": "^4.3.1",
+    "bootstrap": "4.3.1",
     "exports-loader": "^0.7.0",
     "jquery": "^3.4.1",
-    "popper.js": "^1.15.0"
+    "popper.js": "^1.15.0",
+    "turbolinks": "^5.2.0"
   },
   "version": "0.1.0",
   "devDependencies": {

yarn.lock

@@ -1282,7 +1282,7 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap@^4.3.1:
+bootstrap@4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
   integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
@@ -6692,6 +6692,11 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+turbolinks@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/turbolinks/-/turbolinks-5.2.0.tgz#e6877a55ea5c1cb3bb225f0a4ae303d6d32ff77c"
+  integrity sha512-pMiez3tyBo6uRHFNNZoYMmrES/IaGgMhQQM+VFF36keryjb5ms0XkVpmKHkfW/4Vy96qiGW3K9bz0tF5sK9bBw==
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"