diff --git a/package.json b/package.json index 42731a8..cc99517 100644 --- a/package.json +++ b/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" } } diff --git a/src/app.jsx b/src/app.jsx index 8c81d9f..a7f4aa6 100644 --- a/src/app.jsx +++ b/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 (

Starter Kit

-
- { cockpit.format(_("Running on $0"), this.state.hostname) } -
+

+ { cockpit.format(_("Running on $0"), this.state.hostname) } +

); } diff --git a/src/app.scss b/src/app.scss new file mode 100644 index 0000000..87b46f4 --- /dev/null +++ b/src/app.scss @@ -0,0 +1,3 @@ +p { + font-weight: bold; +} diff --git a/src/index.html b/src/index.html index 794a072..5182d9b 100644 --- a/src/index.html +++ b/src/index.html @@ -23,6 +23,7 @@ along with this package; If not, see . + diff --git a/test/check-application b/test/check-application index befa153..34c90e6 100755 --- a/test/check-application +++ b/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() diff --git a/webpack.config.js b/webpack.config.js index b162489..1b64da4 100644 --- a/webpack.config.js +++ b/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$/ } ] },