Configure webpack for SASS

lib/build/files/css_files.js

@@ -113,10 +113,10 @@ module.exports = css_files = {
     '<%= assets_dir %>/stylesheets/user_feed/**/*.css'
   ],
 
-  api_keys_new: [
-    '<%= assets_dir %>/stylesheets/new_dashboard/api-keys.css',
-    '<%= assets_dir %>/stylesheets/vendor/tipsy.css'
-  ],
+  // api_keys_new: [
+  //   '<%= assets_dir %>/stylesheets/new_dashboard/api-keys.css',
+  //   '<%= assets_dir %>/stylesheets/vendor/tipsy.css'
+  // ],
 
   leaflet: [
     '<%= assets_dir %>/stylesheets/map/leaflet.css'

package.json

@@ -68,7 +68,9 @@
     "brfs": "^1.4.3",
     "browserify-resolutions": "1.1.0",
     "cartoassets": "CartoDB/CartoAssets#master",
+    "clean-webpack-plugin": "^0.1.19",
     "colors": "1.1.2",
+    "css-loader": "^0.28.11",
     "csswring": "^3.0.5",
     "eslint": "~4.8.0",
     "eslint-config-semistandard": "~11.0.0",
@@ -78,6 +80,7 @@
     "eslint-plugin-promise": "~3.5.0",
     "eslint-plugin-standard": "~3.0.1",
     "exports-loader": "0.6.4",
+    "extract-text-webpack-plugin": "^2.1.2",
     "fs-extra": "2.0.0",
     "git-rev": "0.2.1",
     "glob": "7.1.1",
@@ -105,11 +108,13 @@
     "jasmine-ajax": "CartoDB/jasmine-ajax#master",
     "jstify": "0.13.0",
     "load-grunt-tasks": "3.2.0",
+    "mini-css-extract-plugin": "^0.4.0",
     "minimist": "1.2.0",
     "open": "0.0.5",
     "prettysize": "0.0.3",
     "raw-loader": "0.5.1",
     "recursive-readdir": "2.2.1",
+    "sass-loader": "^7.0.1",
     "semver": "4.3.6",
     "shim-loader": "0.1.0",
     "source-map-support": "0.4.0",

webpack/dashboard/webpack.dev.config.js

@@ -1,31 +1,49 @@
 const webpack = require('webpack');
-const {resolve} = require('path');
+const glob = require('glob');
+const { resolve } = require('path');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const PACKAGE = require('../../package.json');
-const version = PACKAGE.version;
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const { version } = require('../../package.json');
+
+const PATHS_TO_CLEAN = [
+  'common.js'
+];
 
 const stats = (env) => {
   return env && env.stats;
 };
 
+const rootDir = file => resolve(__dirname, '../../', file);
+
 const isVendor = (module, count) => {
   const userRequest = module.userRequest;
   return userRequest && userRequest.indexOf('node_modules') >= 0;
 };
 
 const entryPoints = {
-  public_table_new: resolve(__dirname, '../../', 'lib/assets/javascripts/dashboard/public-dataset.js'),
-  public_dashboard_new: resolve(__dirname, '../../', 'lib/assets/javascripts/dashboard/public-dashboard.js'),
-  user_feed_new: resolve(__dirname, '../../', 'lib/assets/javascripts/dashboard/user-feed.js'),
-  api_keys_new: resolve(__dirname, '../../', 'lib/assets/javascripts/dashboard/api-keys.js'),
-  data_library_new: resolve(__dirname, '../../', 'lib/assets/javascripts/dashboard/data-library.js'),
-  mobile_apps_new: resolve(__dirname, '../../', 'lib/assets/javascripts/dashboard/mobile-apps.js'),
-  account_new: resolve(__dirname, '../../', 'lib/assets/javascripts/dashboard/account.js'),
-  profile_new: resolve(__dirname, '../../', 'lib/assets/javascripts/dashboard/profile.js'),
-  sessions_new: resolve(__dirname, '../../', 'lib/assets/javascripts/dashboard/sessions.js'),
-  confirmation_new: resolve(__dirname, '../../', 'lib/assets/javascripts/dashboard/confirmation.js'),
-  dashboard_new: resolve(__dirname, '../../', 'lib/assets/javascripts/dashboard/dashboard.js'),
-  organization_new: resolve(__dirname, '../../', 'lib/assets/javascripts/dashboard/organization.js')
+  common: [
+    rootDir('app/assets/stylesheets/old_common/video_player.scss'),
+    rootDir('app/assets/stylesheets/cartoassets/entry.scss'),
+    ...glob.sync(rootDir('app/assets/stylesheets/common/**/*.scss')),
+    ...glob.sync(rootDir('app/assets/stylesheets/client/**/*.scss'))
+  ],
+  public_table_new: rootDir('lib/assets/javascripts/dashboard/public-dataset.js'),
+  public_dashboard_new: rootDir('lib/assets/javascripts/dashboard/public-dashboard.js'),
+  user_feed_new: rootDir('lib/assets/javascripts/dashboard/user-feed.js'),
+  api_keys_new: [
+    rootDir('lib/assets/javascripts/dashboard/api-keys.js'),
+    rootDir('app/assets/stylesheets/new_dashboard/api-keys.scss'),
+    rootDir('app/assets/stylesheets/plugins/tipsy.scss')
+  ],
+  data_library_new: rootDir('lib/assets/javascripts/dashboard/data-library.js'),
+  mobile_apps_new: rootDir('lib/assets/javascripts/dashboard/mobile-apps.js'),
+  account_new: rootDir('lib/assets/javascripts/dashboard/account.js'),
+  profile_new: rootDir('lib/assets/javascripts/dashboard/profile.js'),
+  sessions_new: rootDir('lib/assets/javascripts/dashboard/sessions.js'),
+  confirmation_new: rootDir('lib/assets/javascripts/dashboard/confirmation.js'),
+  dashboard_new: rootDir('lib/assets/javascripts/dashboard/dashboard.js'),
+  organization_new: rootDir('lib/assets/javascripts/dashboard/organization.js')
 };
 
 module.exports = env => {
@@ -33,7 +51,7 @@ module.exports = env => {
     entry: entryPoints,
     output: {
       filename: `${version}/javascripts/[name].js`,
-      path: resolve(__dirname, '../../', 'public/assets')
+      path: rootDir('public/assets')
     },
     resolve: {
       symlinks: false,
@@ -79,6 +97,15 @@ module.exports = env => {
         new webpack.DefinePlugin({
           __IN_DEV__: JSON.stringify(true),
           __ENV__: JSON.stringify('dev')
+        }),
+
+        new ExtractTextPlugin({
+          filename: `./${version}/stylesheets/[name].css`
+        }),
+
+        new CleanWebpackPlugin(PATHS_TO_CLEAN, {
+          root: rootDir(`public/assets/${version}/javascripts`),
+          verbose: true
         })
       ])
       .filter(p => !!p), // undefined is not a valid plugin, so filter undefined values here
@@ -126,6 +153,12 @@ module.exports = env => {
             presets: ['env'],
             plugins: ['transform-object-rest-spread']
           }
+        },
+        {
+          test: /\.scss$/,
+          use: ExtractTextPlugin.extract({
+            use: ['css-loader', 'sass-loader']
+          })
         }
       ]
     },

webpack/dashboard/webpack.prod.config.js

@@ -4,9 +4,8 @@
 // more control of the output bundle in order to fix unexpected behavior in old browsers.
 
 const webpack = require('webpack');
-const {resolve} = require('path');
-const PACKAGE = require('../../package.json');
-const version = PACKAGE.version;
+const { resolve } = require('path');
+const { version } = require('../../package.json');
 
 const isVendor = (module, count) => {
   const userRequest = module.userRequest;