Add scss example

package.json

@@ -17,19 +17,23 @@
     "chrome-remote-interface": "^0.25.5",
     "compression-webpack-plugin": "~1.0.0",
     "copy-webpack-plugin": "~3.0.1",
+    "css-loader": "^0.28.11",
     "eslint": "^3.0.0",
     "eslint-loader": "~1.6.1",
     "eslint-plugin-react": "~6.9.0",
+    "extract-text-webpack-plugin": "^2.1.0",
     "htmlparser": "^1.7.7",
     "jed": "^1.1.1",
     "jshint": "~2.9.1",
     "jshint-loader": "~0.8.3",
     "po2json": "^0.4.5",
+    "sass-loader": "^7.0.3",
     "sizzle": "^2.3.3",
     "stdio": "^0.2.7",
     "webpack": "^2.6.1"
   },
   "dependencies": {
+    "node-sass": "^4.9.0",
     "react-lite": "0.15.30"
   }
 }

src/app.jsx

@@ -20,6 +20,7 @@
 
 import cockpit from 'cockpit';
 import React from 'react';
+import './app.scss';
 
 const _ = cockpit.gettext;
 
@@ -36,9 +37,9 @@ export class Application extends React.Component {
         return (
             <div className="container-fluid">
                 <h2>Starter Kit</h2>
-                <div>
-                    <span>{ cockpit.format(_("Running on $0"), this.state.hostname) }</span>
-                </div>
+                <p>
+                    { cockpit.format(_("Running on $0"), this.state.hostname) }
+                </p>
             </div>
         );
     }

src/app.scss

@@ -0,0 +1,3 @@
+p {
+    font-weight: bold;
+}

src/index.html

@@ -23,6 +23,7 @@ along with this package; If not, see <http://www.gnu.org/licenses/>.
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="stylesheet" href="../base1/patternfly.css">
+    <link rel="stylesheet" href="index.css">
 
     <script type="text/javascript" src="../base1/cockpit.js"></script>
     <script type="text/javascript" src="../*/po.js"></script>

test/check-application

@@ -26,8 +26,8 @@ class TestApplication(testlib.MachineCase):
 
         # verify expected host name
         hostname = m.execute("hostname").strip()
-        b.wait_present(".container-fluid span")
-        b.wait_text(".container-fluid span", "Running on " + hostname)
+        b.wait_present(".container-fluid p")
+        b.wait_text(".container-fluid p", "Running on " + hostname)
 
         # change language to German
         b.switch_to_top()
@@ -46,7 +46,7 @@ class TestApplication(testlib.MachineCase):
         b.go("/starter-kit")
         b.enter_page("/starter-kit")
         # page label (from js) should be translated
-        b.wait_in_text(".container-fluid span", "Läuft auf")
+        b.wait_in_text(".container-fluid p", "Läuft auf")
 
 if __name__ == '__main__':
     testlib.test_main()

webpack.config.js

@@ -1,5 +1,6 @@
 const path = require("path");
 const copy = require("copy-webpack-plugin");
+const extract = require("extract-text-webpack-plugin");
 const fs = require("fs");
 const webpack = require("webpack");
 const CompressionPlugin = require("compression-webpack-plugin");
@@ -82,7 +83,8 @@ var plugins = [
             'NODE_ENV': JSON.stringify(production ? 'production' : 'development')
         }
     }),
-    new copy(info.files)
+    new copy(info.files),
+    new extract("[name].css")
 ];
 
 /* Only minimize when in production mode */
@@ -149,6 +151,11 @@ module.exports = {
                 exclude: /node_modules/,
                 loader: 'babel-loader',
                 test: /\.es6$/
+            },
+            {
+                exclude: /node_modules/,
+                loader: extract.extract('css-loader!sass-loader'),
+                test: /\.scss$/
             }
         ]
     },