sass support for bootstrap 4 and font-awesome

generators/client-2/files.js

@@ -38,10 +38,21 @@ const files = {
         }
     ],
     sass: [
+        {
+            condition: generator => generator.useSass,
+            templates: [
+            '_.bootstraprc',
+            '_font-awesome-sass.config.js'
+            ]
+        },
         {
             condition: generator => generator.useSass,
             path: MAIN_SRC_DIR,
             templates: [
+                'scss/bootstrap/_customizations.scss',
+                'scss/bootstrap/_pre-customizations.scss',
+                'scss/font-awesome/_font-awesome.scss',
+                'scss/_app.scss',
                 'scss/_main.scss',
                 'scss/_vendor.scss'
             ]

generators/client-2/templates/_.bootstraprc

@@ -0,0 +1,116 @@
+---
+# Output debugging info
+# loglevel: debug
+
+# Major version of Bootstrap: 3 or 4
+bootstrapVersion: 4
+
+# If Bootstrap version 4 is used - turn on/off flexbox model
+useFlexbox: true
+
+# Webpack loaders, order matters
+styleLoaders:
+  - style
+  - css
+ # - postcss
+  - sass
+
+# Extract styles to stand-alone css file
+# Different settings for different environments can be used,
+# It depends on value of NODE_ENV environment variable
+# This param can also be set in webpack config:
+#   entry: 'bootstrap-loader/extractStyles'
+extractStyles: false
+# env:
+#   development:
+#     extractStyles: false
+#   production:
+#     extractStyles: true
+
+
+# Customize Bootstrap variables that get imported before the original Bootstrap variables.
+# Thus, derived Bootstrap variables can depend on values from here.
+# See the Bootstrap _variables.scss file for examples of derived Bootstrap variables.
+#
+preBootstrapCustomizations: ./<%= MAIN_SRC_DIR %>scss/bootstrap/pre-customizations.scss
+
+
+# This gets loaded after bootstrap/variables is loaded
+# Thus, you may customize Bootstrap variables
+# based on the values established in the Bootstrap _variables.scss file
+#
+bootstrapCustomizations: ./<%= MAIN_SRC_DIR %>scss/bootstrap/customizations.scss
+
+
+# Import your custom styles here
+# Usually this endpoint-file contains list of @imports of your application styles
+#
+appStyles: ./<%= MAIN_SRC_DIR %>scss/app.scss
+
+
+### Bootstrap styles
+styles:
+
+  # Mixins
+  mixins: true
+
+  # Reset and dependencies
+  normalize: true
+  print: true
+
+  # Core CSS
+  reboot: true
+  type: true
+  images: true
+  code: true
+  grid: true
+  tables: true
+  forms: true
+  buttons: true
+
+  # Components
+  animation: true
+  dropdown: true
+  button-group: true
+  input-group: true
+  custom-forms: true
+  nav: true
+  navbar: true
+  card: true
+  breadcrumb: true
+  pagination: true
+  #pager: true
+  #labels: true
+  jumbotron: true
+  alert: true
+  progress: true
+  media: true
+  list-group: true
+  responsive-embed: true
+  close: true
+
+  # Components w/ JavaScript
+  modal: true
+  tooltip: true
+  popover: true
+  carousel: true
+
+  # Utility classes
+  utilities: true
+  # utilities-background: true
+  # utilities-spacing: true
+  # utilities-responsive: true
+
+### Bootstrap scripts
+scripts:
+  alert: true
+  button: true
+  carousel: true
+  collapse: true
+  dropdown: true
+  modal: true
+  popover: true
+  scrollspy: true
+  tab: true
+  tooltip: true
+  util: true

generators/client-2/templates/_font-awesome-sass.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+    fontAwesomeCustomizations: "./<%= MAIN_SRC_DIR %>scss/font-awesome/font-awesome.scss",
+
+  styles: {
+    "mixins": true,
+
+    "core": true,
+    "icons": true,
+
+    "larger": true,
+    "path": true,
+  }
+};

generators/client-2/templates/_package.json

@@ -28,6 +28,7 @@
     "reflect-metadata": "0.1.8",
     "rxjs": "5.0.0-rc.4",
     "swagger-ui": "2.2.8",
+    "tether": "1.4.0",
     "ui-router-ng2": "1.0.0-beta.3",
     "ui-router-visualizer": "2.0.11",
     "zone.js": "0.7.2"
@@ -86,6 +87,15 @@
     <%_ if (buildTool == 'maven') { _%>
     "xml2js": "0.4.17",
     <%_ } _%>
+    <%_ if(useSass) { _%>
+    "bootstrap-loader": "2.0.0-beta.16",
+    "sass-loader": "4.0.2",
+    "node-sass": "3.13.0",
+    "resolve-url-loader": "1.6.0",
+    "url-loader": "0.5.7",
+    "font-awesome-sass-loader": "1.0.2",
+    <%_ } _%>
+
     "yargs": "6.4.0"
   },
   "engines": {

generators/client-2/templates/src/main/webapp/app/_vendor.ts

@@ -6,9 +6,18 @@
 // import 'angular-loading-bar';
 // import 'ng-file-upload';
 // import 'ng-infinite-scroll';
+
+<%_ if(useSass) { _%>
+import 'bootstrap-loader';
+import 'font-awesome-sass-loader';
+<%_} else { _%>
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'font-awesome/css/font-awesome.min.css';
+<%_ } _%>
+
+
+
 import '../content/css/main.css';
 <%_ if(useSass) { _%>
-import '../content/css/vendor.css';
+// import '../content/css/vendor.css'; deprecated??? 
 <%_ } _%>

generators/client-2/templates/src/main/webapp/scss/_app.scss

@@ -0,0 +1,2 @@
+//put
+.example {}

generators/client-2/templates/src/main/webapp/scss/bootstrap/_customizations.scss

@@ -0,0 +1 @@
+$input-height: $input-height * 1.10;

generators/client-2/templates/src/main/webapp/scss/bootstrap/_pre-customizations.scss

@@ -0,0 +1 @@
+$input-color: green !default;

generators/client-2/templates/src/main/webapp/scss/font-awesome/_font-awesome.scss

@@ -0,0 +1,2 @@
+$fa-inverse: #eee;
+$fa-border-color: #ddd;

generators/client-2/templates/webpack/_webpack.common.js

@@ -95,7 +95,21 @@ module.exports = function (options) {
             ]),
             new webpack.ProvidePlugin({
                 $: "jquery",
-                jQuery: "jquery"
+                jQuery: "jquery",
+                "window.jQuery": "jquery",
+                'Tether': 'tether',
+                'window.Tether': 'tether',
+                Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
+                Alert: "exports?Alert!bootstrap/js/dist/alert",
+                Button: "exports?Button!bootstrap/js/dist/button",
+                Carousel: "exports?Carousel!bootstrap/js/dist/carousel",
+                Collapse: "exports?Collapse!bootstrap/js/dist/collapse",
+                Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown",
+                Modal: "exports?Modal!bootstrap/js/dist/modal",
+                Popover: "exports?Popover!bootstrap/js/dist/popover",
+                Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy",
+                Tab: "exports?Tab!bootstrap/js/dist/tab",
+                Util: "exports?Util!bootstrap/js/dist/util"
             }),
             new HtmlWebpackPlugin({
                 template: 'handlebars!./src/main/webapp/index.hbs',