Correctly install and load webpacked studio-frontend

cms/templates/asset_index.html

@@ -13,16 +13,11 @@
 <%namespace name='static' file='static_content.html'/>
 
 <%block name="header_extras">
-% if waffle_flag_enabled:
-    <link rel="stylesheet" type="text/css" href="${static.url('common/css/vendor/studio-frontend.min.css')}" />
-    <script type="text/javascript" src="${static.url('common/js/vendor/assets.min.js')}" defer></script>
-% else:
     % for template_name in ["asset"]:
     <script type="text/template" id="${template_name}-tpl">
         <%static:include path="js/${template_name}.underscore" />
     </script>
     % endfor
-% endif
 </%block>
 
 % if not waffle_flag_enabled:
@@ -62,6 +57,7 @@
         <div class="content-primary">
             % if waffle_flag_enabled:
                 <div id="root"></div>
+                <%static:webpack entry="AssetsPage"></%static:webpack>
             % else:
                 <div class="wrapper-assets"></div>
             % endif

package.json

@@ -4,17 +4,24 @@
   "dependencies": {
     "babel-core": "^6.23.0",
     "babel-loader": "^6.4.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.2.1",
     "babel-preset-react": "^6.24.1",
     "backbone": "~1.3.2",
     "backbone.paginator": "~2.0.3",
     "coffee-loader": "^0.7.3",
     "coffee-script": "1.6.1",
-    "@edx/studio-frontend": "0.1.0",
+    "css-loader": "^0.28.5",
     "@edx/edx-bootstrap": "0.3.4",
+    "@edx/paragon": "0.1.0",
+    "@edx/studio-frontend": "0.2.0",
     "edx-pattern-library": "0.18.1",
     "edx-ui-toolkit": "1.5.2",
     "exports-loader": "^0.6.4",
+    "extract-text-webpack-plugin": "^2.1.2",
+    "file-loader": "^1.1.4",
+    "font-awesome": "^4.7.0",
     "hls.js": "0.7.2",
     "imports-loader": "^0.7.1",
     "jquery": "~2.2.0",
@@ -22,6 +29,7 @@
     "jquery.scrollto": "~2.1.2",
     "moment": "2.18.1",
     "moment-timezone": "~0.5.5",
+    "node-sass": "^4.5.3",
     "picturefill": "~3.0.2",
     "popper.js": "~1.12.5",
     "prop-types": "^15.5.10",
@@ -30,6 +38,8 @@
     "react-dom": "^15.5.4",
     "requirejs": "~2.3.2",
     "rtlcss": "^2.2.0",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.18.2",
     "string-replace-webpack-plugin": "^0.1.3",
     "uglify-js": "2.7.0",
     "underscore": "~1.8.3",

pavelib/assets.py

@@ -64,10 +64,6 @@ NPM_INSTALLED_LIBRARIES = [
     'requirejs/require.js',
     'underscore.string/dist/underscore.string.js',
     'underscore/underscore.js',
-    '@edx/studio-frontend/dist/assets.min.js',
-    '@edx/studio-frontend/dist/assets.min.js.map',
-    '@edx/studio-frontend/dist/studio-frontend.min.css',
-    '@edx/studio-frontend/dist/studio-frontend.min.css.map',
     'which-country/index.js'
 ]
 

webpack.config.js

@@ -5,9 +5,14 @@
 var path = require('path');
 var webpack = require('webpack');
 var BundleTracker = require('webpack-bundle-tracker');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var StringReplace = require('string-replace-webpack-plugin');
 
 var isProd = process.env.NODE_ENV === 'production';
+var extractSass = new ExtractTextPlugin({
+    filename: 'css/[name].[contenthash].css',
+    disable: !isProd
+});
 
 var namespacedRequireFiles = [
     path.resolve(__dirname, 'common/static/common/js/components/views/feedback_notification.js'),
@@ -19,6 +24,7 @@ var wpconfig = {
 
     entry: {
         // Studio
+        AssetsPage: './node_modules/@edx/studio-frontend/src/index.jsx',
         Import: './cms/static/js/features/import/factories/import.js',
         StudioIndex: './cms/static/js/features_jsx/studio/index.jsx',
 
@@ -43,6 +49,7 @@ var wpconfig = {
     devtool: isProd ? false : 'source-map',
 
     plugins: [
+        new ExtractTextPlugin('node_modules/@edx/studio-frontend/dist/studio-frontend.min.css'),
         new webpack.NoEmitOnErrorsPlugin(),
         new webpack.NamedModulesPlugin(),
         new webpack.DefinePlugin({
@@ -110,6 +117,42 @@ var wpconfig = {
                 ],
                 use: 'babel-loader'
             },
+            {
+                test: /\.(js|jsx)$/,
+                include: [
+                    /studio-frontend/,
+                    /paragon/
+                ],
+                use: 'babel-loader'
+            },
+            {
+                test: /(.scss|.css)$/,
+                include: [
+                    /studio-frontend/,
+                    /paragon/,
+                    /font-awesome/
+                ],
+                use: extractSass.extract({
+                    use: [{
+                        loader: 'css-loader',
+                        options: {
+                            modules: true,
+                            localIdentName: '[name]__[local]___[hash:base64:5]'
+                        }
+                    }, {
+                        loader: 'sass-loader',
+                        options: {
+                            data: '$base-rem-size: 0.625; @import "paragon-reset";',
+                            includePaths: [
+                                path.join(__dirname, './node_modules/@edx/paragon/src/utils'),
+                                path.join(__dirname, './node_modules/')
+                            ],
+                            sourceMap: true
+                        }
+                    }],
+                    fallback: 'style-loader'
+                })
+            },
             {
                 test: /\.coffee$/,
                 exclude: /node_modules/,
@@ -130,6 +173,10 @@ var wpconfig = {
                             'exports-loader?this.AjaxPrefix!../../../../common/static/coffee/src/ajax_prefix.coffee'
                     }
                 }
+            },
+            {
+                test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
+                loader: 'file-loader'
             }
         ]
     },