Add ability to customize theme styles

Showcases how different themes/styles can be supported using
.env variables. If an environemnt name is specified during
the build process, an overrides file will be pulled in to
allow modifications to color and font definitions.

This commit includes possible style modifications with the openpower
env name as an example. To see the openpower changes, add the variable
definition VUE_APP_NAME="openpower" to your .env.development.local file
or build using 'npm run build -- --mode openpower'

- Moves helper imports into vue config to allow for
  specific import order
- Removed helper imports in SFCs

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Iaf7a59c24fda06a7b74e23f2f042fb3300cb2056

1 files changed, 33 insertions, 0 deletions

diff --git a/vue.config.js b/vue.config.js
index c681f470..81763622 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,6 +1,39 @@
 const CompressionPlugin = require('compression-webpack-plugin');
 
 module.exports = {
+  css: {
+    loaderOptions: {
+      sass: {
+        prependData: () => {
+          const envName = process.env.VUE_APP_ENV_NAME;
+          if (envName !== undefined) {
+            // If there is an env name defined, import Sass
+            // overrides.
+            // It is important that these imports stay in this
+            // order to make sure enviroment overrides
+            // take precedence over the default BMC styles
+            return `
+              @import "@/assets/styles/bmc/helpers";
+              @import "@/env/assets/styles/_${process.env.VUE_APP_ENV_NAME}";
+              @import "@/assets/styles/bootstrap/_helpers";
+            `;
+          } else {
+            // Include helper imports so single file components
+            // do not need to include helper imports
+
+            // BMC Helpers must be imported before Bootstrap helpers to
+            // take advantage of Bootstrap's use of the Sass !default
+            // statement. Moving this helper after results in Bootstrap
+            // variables taking precedence over BMC's
+            return `
+              @import "@/assets/styles/bmc/helpers";
+              @import "@/assets/styles/bootstrap/_helpers";
+            `;
+          }
+        }
+      }
+    }
+  },
   devServer: {
     https: true,
     proxy: {