diff --git a/packages/gallery/package.json b/packages/gallery/package.json
index 6424627..0c361e1 100644
--- a/packages/gallery/package.json
+++ b/packages/gallery/package.json
@@ -12,8 +12,10 @@
"dev": "webpack-dev-server"
},
"dependencies": {
+ "css-loader": "^0.28.7",
"domvm": "~3.2.1",
"exif-parser": "~0.1.9",
+ "extract-text-webpack-plugin": "^3.0.2",
"frptools": "1.2.0",
"pica": "~2.0.8",
"pouchdb-adapter-http": "~6.3.4",
@@ -23,6 +25,9 @@
"pouchdb-core": "~6.3.4",
"pouchdb-replication": "~6.3.4",
"router": "2.0.0",
+ "semantic-ui-reset": "^2.2.12",
+ "semantic-ui-site": "^2.2.12",
+ "style-loader": "^0.19.0",
"styletron": "^2.5.1",
"styletron-utils": "^2.5.4",
"webpack": "~3.8.1",
diff --git a/packages/gallery/src/app.css b/packages/gallery/src/app.css
new file mode 100644
index 0000000..b8ef1f2
--- /dev/null
+++ b/packages/gallery/src/app.css
@@ -0,0 +1,7 @@
+@import '../node_modules/semantic-ui-reset/reset.css';
+@import '../node_modules/semantic-ui-site/site.css';
+
+body {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/packages/gallery/src/app.js b/packages/gallery/src/app.js
index a413dd7..73efa04 100644
--- a/packages/gallery/src/app.js
+++ b/packages/gallery/src/app.js
@@ -1,6 +1,7 @@
// import { createView } from 'domvm/dist/dev/domvm.dev.js';
import { createView } from 'domvm/dist/micro/domvm.micro.js';
+import * as styles from './app.css';
import generateThumbnails from './contextLoaders/generateThumbnails.js';
import { GalleryView } from './interface/gallery.js';
import { router } from './services/router.js';
diff --git a/packages/gallery/src/index.html b/packages/gallery/src/index.html
index 028e232..6eb08d3 100644
--- a/packages/gallery/src/index.html
+++ b/packages/gallery/src/index.html
@@ -2,7 +2,7 @@
-
+
diff --git a/packages/gallery/webpack.config.js b/packages/gallery/webpack.config.js
index 35141cd..ccada62 100644
--- a/packages/gallery/webpack.config.js
+++ b/packages/gallery/webpack.config.js
@@ -1,5 +1,6 @@
const path = require('path');
const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
context: path.resolve(__dirname, './src'),
@@ -14,10 +15,22 @@ module.exports = {
devServer: {
contentBase: path.resolve(__dirname, './src')
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: 'css-loader'
+ })
+ }
+ ]
+ },
plugins: [
new webpack.DefinePlugin({
__DEV__: true
- })
+ }),
+ new ExtractTextPlugin('app.css', { allChunks: true })
],
devtool: 'source-map'
};