Fix broken theming (#709)

* Dynamic require theme scss from env var

* Update README about THEME_SCSS. Try to fix tests.

* Fix broken karma webpack config

* Fix THEME_SCSS defaulting in webpack config

README.md

@@ -185,7 +185,9 @@ Theming and Branding
 We presently have support for basic branding of the logo displayed in the header and on error pages. This is facilitated
 by including an additional SCSS file specifying the path and dimensions of the logo. The default Open edX theme located
 at `static/sass/themes/open-edx.scss` is a good starting point for those interested in changing the logo. Once your
-customizations are complete, update the value of the setting `THEME_SCSS` with the path to your new SCSS file.
+customizations are complete, update the value of the yaml configuration setting `INSIGHTS_THEME_SCSS` with the path to
+your new SCSS file. If running Webpack manually, you will have to set the environmental variable `THEME_SCSS` to your
+file before running Webpack.
 
 Developers may also choose to further customize the site by changing the variables loaded by SCSS. This is most easily
 accomplished via the steps below. This will allow for easily changing basic colors and spacing.

analytics_dashboard/settings/base.py

@@ -379,12 +379,6 @@ with open(join(DOCS_ROOT, "config.ini")) as config_file:
     DOCS_CONFIG.readfp(config_file)
 ########## END DOCS/HELP CONFIGURATION
 
-
-########## THEME CONFIGURATION
-# Path of the SCSS file to use for the site's theme
-THEME_SCSS = 'sass/themes/open-edx.scss'
-########## END THEME CONFIGURATION
-
 ########## COURSE API
 COURSE_API_URL = None
 GRADING_POLICY_API_URL = None

analytics_dashboard/static/js/application-main.js

@@ -2,7 +2,7 @@
  * Load scripts needed across the application.
  */
 require('sass/style-application.scss');
-require('sass/themes/open-edx.scss');
+require(process.env.THEME_SCSS);
 
 require(['views/data-table-view',
     'views/announcement-view',

karma.conf.js

@@ -6,6 +6,7 @@ var path = require('path'),
 
 module.exports = function(config) {
     'use strict';
+
     config.set({
         // base path that will be used to resolve all patterns (eg. files, exclude)
         basePath: '',
@@ -141,6 +142,12 @@ module.exports = function(config) {
                     // the text so tests can be run if modules reference gettext
                     gettext: 'test/browser-shims/gettext',
                     ngettext: 'test/browser-shims/ngettext'
+                }),
+                // This defines the theme that the SCSS should be building with. For test, this is always open-edx
+                new webpack.DefinePlugin({
+                    'process.env': {
+                        THEME_SCSS: 'sass/themes/open-edx.scss'
+                    }
                 })
             ]
         },

webpack.common.config.js

@@ -104,6 +104,12 @@ module.exports = {
             $: 'jquery',
             jQuery: 'jquery'
         }),
+        // This defines the theme that the SCSS should be building with
+        new webpack.DefinePlugin({
+            'process.env': {
+                'THEME_SCSS': JSON.stringify(process.env.THEME_SCSS || 'sass/themes/open-edx.scss')
+            }
+        }),
         // AggressiveMergingPlugin in conjunction with these CommonChunkPlugins turns many GBs worth of individual
         // chunks into one or two large chunks that entry chunks reference. It reduces output bundle size a lot.
         new webpack.optimize.AggressiveMergingPlugin({minSizeReduce: 1.1}),