Add CSS example

Author: martinRenou

{{cookiecutter.github_project_name}}/css/widget.css

@@ -0,0 +1,3 @@
+.custom-widget {
+  background-color: blue;
+}

{{cookiecutter.github_project_name}}/package.json

@@ -10,7 +10,8 @@
   ],
   "files": [
     "lib/**/*.js",
-    "dist/*.js"
+    "dist/*.js",
+    "css/*.css"
   ],
   "homepage": "https://github.com/{{ cookiecutter.github_organization_name }}/{{ cookiecutter.github_project_name }}",
   "bugs": {
@@ -57,6 +58,7 @@
     "@types/mocha": "^5.2.5",
     "@types/node": "^10.11.6",
     "@types/webpack-env": "^1.13.6",
+    "css-loader": "^3.2.0",
     "expect.js": "^0.3.1",
     "fs-extra": "^7.0.0",
     "karma": "^3.0.0",
@@ -71,6 +73,7 @@
     "npm-run-all": "^4.1.3",
     "rimraf": "^2.6.2",
     "source-map-loader": "^0.2.4",
+    "style-loader": "^1.0.0",
     "ts-loader": "^5.2.1",
     "typescript": "~3.1.2",
     "webpack": "^4.20.2",

{{cookiecutter.github_project_name}}/src/widget.ts

@@ -9,6 +9,9 @@ import {
   MODULE_NAME, MODULE_VERSION
 } from './version';
 
+// Import the CSS
+import '../css/widget.css'
+
 
 export
 class ExampleModel extends DOMWidgetModel {
@@ -41,6 +44,8 @@ class ExampleModel extends DOMWidgetModel {
 export
 class ExampleView extends DOMWidgetView {
   render() {
+    this.el.classList.add('custom-widget');
+
     this.value_changed();
     this.model.on('change:value', this.value_changed, this);
   }