Extract CSS/SCSS to app.{platform}.css

Rename app.bundle.{platform}.js => app.{platform}.js

Author: lewebsimple

template/package.json

@@ -21,11 +21,16 @@
     "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.1",
     "css-loader": "^0.28.10",
+    "extract-text-webpack-plugin": "^3.0.2",
     "fs-extra": "^5.0.0",
     "nativescript-vue-loader": "^0.1.5",
     "nativescript-vue-target": "^0.1.0",
     "nativescript-vue-template-compiler": "^1.2.0",
+    "node-sass": "^4.7.2",
+    "ns-vue-loader": "^0.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
     "rimraf": "^2.6.2",
+    "sass-loader": "^6.0.6",
     "vue-template-compiler": "^2.5.13",
     "webpack": "^3.11.0",
     "winston-color": "^1.0.0"

template/src/App.vue

@@ -3,3 +3,10 @@
         <label text="NativeScript-Vue 🎸"/>
     </stack-layout>
 </template>
+
+<style>
+    Label {
+        font-size: 24px;
+        text-align: center;
+    }
+</style>

template/src/main.js

@@ -1,6 +1,8 @@
 const Vue = require('nativescript-vue');
 const App = require('./App').default;
 
+import './styles.scss';
+
 new Vue({
   template: `<page><app/></page>`,
 

template/src/styles.scss

@@ -0,0 +1,4 @@
+$label-color: royalblue;
+Label {
+  color: $label-color;
+}

template/template/app/package.json

@@ -2,7 +2,7 @@
   "android": {
     "v8Flags": "--expose_gc"
   },
-  "main": "app.bundle.js",
+  "main": "app.js",
   "name": "{{ name }}",
   "version": "{{ version }}"
-}
+}

template/webpack.config.js

@@ -1,15 +1,37 @@
 const path = require('path');
 const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const NativeScriptVueTarget = require('nativescript-vue-target');
 
 // Generate platform-specific webpack configuration
 module.exports = platform => {
+
+  // CSS / SCSS style extraction loaders
+  const cssLoader = ExtractTextPlugin.extract({
+    use: [
+      {
+        loader: 'css-loader',
+        options: {url: false},
+      },
+    ],
+  });
+  const scssLoader = ExtractTextPlugin.extract({
+    use: [
+      {
+        loader: 'css-loader',
+        options: {url: false},
+      },
+      'sass-loader',
+    ],
+  });
+
   return {
     target: NativeScriptVueTarget,
     entry: path.resolve(__dirname, './src/main.js'),
     output: {
       path: path.resolve(__dirname, './dist/app'),
-      filename: `app.bundle.${platform}.js`,
+      filename: `app.${platform}.js`,
     },
     module: {
       rules: [
@@ -18,9 +40,23 @@ module.exports = platform => {
           exclude: /(node_modules)/,
           loader: 'babel-loader',
         },
+        {
+          test: /\.css$/,
+          use: cssLoader,
+        },
+        {
+          test: /\.scss$/,
+          use: scssLoader,
+        },
         {
           test: /\.vue$/,
-          loader: 'nativescript-vue-loader',
+          loader: 'ns-vue-loader',
+          options: {
+            loaders: {
+              css: cssLoader,
+              scss: scssLoader,
+            },
+          },
         },
       ],
     },
@@ -43,6 +79,12 @@ module.exports = platform => {
       callback();
     },
     plugins: [
+      new ExtractTextPlugin({filename: `app.${platform}.css`}),
+      new OptimizeCssAssetsPlugin({
+        cssProcessor: require('cssnano'),
+        cssProcessorOptions: {discardComments: {removeAll: true}},
+        canPrint: false,
+      }),
       new webpack.optimize.UglifyJsPlugin({
         compress: {warnings: false},
         output: {comments: false},