[IMP] compilation separe css files from vue files

package.json

@@ -14,6 +14,7 @@
 		"babel-preset-env": "^1.6.0",
 		"babel-preset-stage-2": "^6.24.1",
 		"css-loader": "^0.28.4",
+		"extract-text-webpack-plugin": "^3.0.0",
 		"file-loader": "^0.11.2",
 		"node-sass": "^4.5.3",
 		"pug": "^2.0.0-rc.2",

src/components/SummaryDisplay.vue

@@ -118,7 +118,7 @@
                 margin: 95px 20px 75px 20px
                 padding-top: 5px
                 overflow-y: auto
-
+            
                 table
                     width: 100%
                     font-size: 7.5pt

templates.xml

@@ -2,8 +2,9 @@
     <data>
         <template id="eiru_pos.assets" name="Eiru Pos Assets" inherit_id="eiru_assets.assets">
             <xpath expr="." position="inside">
-                <script src="http://localhost:35729/livereload.js"></script>
-                <script type="text/javascript" src="/eiru_pos/static/src/main.js"></script>
+                <script src="http://localhost:35729/livereload.js" />
+                <link rel="stylesheet" href="/eiru_pos/static/src/main.css" />
+                <script type="text/javascript" src="/eiru_pos/static/src/main.js" />
             </xpath>
         </template>
 

webpack.config.js

@@ -1,5 +1,6 @@
 var Path = require('path');
 var LiveReloadPlugin = require('webpack-livereload-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 module.exports = {
     entry: Path.resolve('src/index.js'),
@@ -15,13 +16,17 @@ module.exports = {
         }
     },
     plugins: [
-        new LiveReloadPlugin()
+        new LiveReloadPlugin(),
+        new ExtractTextPlugin('main.css')
     ],
     module: {
         rules: [
             {
                 test: /\.vue$/,
-                loader: 'vue-loader'
+                loader: 'vue-loader',
+                options: {
+                    extractCSS: true
+                }
             },
             {
                 test: /\.js$/,

yarn.lock

@@ -164,7 +164,7 @@ async-foreach@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
 
-async@^2.1.2, async@^2.1.5:
+async@^2.1.2, async@^2.1.5, async@^2.4.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
@@ -1605,6 +1605,15 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
+extract-text-webpack-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.0.tgz#90caa7907bc449f335005e3ac7532b41b00de612"
+  dependencies:
+    async "^2.4.1"
+    loader-utils "^1.1.0"
+    schema-utils "^0.3.0"
+    webpack-sources "^1.0.1"
+
 extsprintf@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"