Merge pull request #15 from Tynarus/global-stylesheet

fixing global css file and some prod build issues

Author: Tynarus

README.md

@@ -15,4 +15,5 @@ A basic Angular 4 seed project utilizing the following technologies:
 * `npm test` - run the project unit tests (*.spec.ts files)
 * `npm run coverage` - run the project unit tests one time and print out a coverage report, generated under **/coverage/index.html**
 * `npm run lint` - run the project linting (will be run every time `npm test` is run)
-* `npm run build` - generate a production build for the project, which will be inserted into dist/
+* `npm run build` - generate a production build for the project, which will be inserted into dist/
+* `npm run server` - run a live-server instance off of the **dist/** directory (generated from the `build` command)

config/build/webpack.common.js

@@ -1,12 +1,14 @@
-var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var helpers = require('../helpers');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const helpers = require('../helpers');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
     entry: {
         'polyfills': './src/polyfills.ts',
         'vendor': './src/vendor.ts',
-        'app': './src/main.ts'
+        'app': './src/main.ts',
+        'styles': './src/global.scss'
     },
 
     resolve: {
@@ -28,20 +30,17 @@ module.exports = {
             {
                 test: /\.scss$/,
                 exclude: [ /node_modules/, helpers.root('src', 'global.scss') ],
-                use: [ 'raw-loader', 'sass-loader' ]
+                use: [ 'to-string-loader', 'css-loader', 'sass-loader' ]
             },
             {
-                test: helpers.root('src', 'global.scss'),
-                use: [ 'style-loader', 'css-loader', 'sass-loader' ]
+                test: /global\.scss$/,
+                use: ExtractTextPlugin.extract({
+                    use: 'css-loader!sass-loader'
+                })
             },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|otf|ttf|eot|ico)$/,
                 use: 'file-loader?name=assets/[name].[hash].[ext]'
-            },
-            {
-                test: /\.css$/,
-                exclude: helpers.root('src', 'app'),
-                use: [ 'raw-loader', 'css-loader' ]
             }
         ]
     },
@@ -57,7 +56,7 @@ module.exports = {
 
         new webpack.ContextReplacementPlugin(
             /angular(\\|\/)core(\\|\/)@angular/,
-            helpers.root('src'), // location of your src
+            helpers.root('src'),
             {}
         )
     ]

config/build/webpack.dev.js

@@ -1,6 +1,7 @@
-var webpackMerge = require('webpack-merge');
-var commonConfig = require('./webpack.common.js');
-var helpers = require('../helpers');
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('../helpers');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = webpackMerge(commonConfig, {
     devtool: 'cheap-module-eval-source-map',
@@ -23,5 +24,9 @@ module.exports = webpackMerge(commonConfig, {
                 changeOrigin: true
             }
         }*/
-    }
+    },
+
+    plugins: [
+        new ExtractTextPlugin('styles.css')
+    ]
 });

config/build/webpack.prod.js

@@ -1,19 +1,19 @@
-var webpack = require("webpack");
-var webpackMerge = require("webpack-merge");
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
-var commonConfig = require("./webpack.common.js");
-var helpers = require("../helpers");
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('../helpers');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
-const ENV = process.env.NODE_ENV = process.env.ENV = "production";
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 
 module.exports = webpackMerge(commonConfig, {
-    devtool: "source-map",
+    devtool: 'source-map',
 
     output: {
-        path: helpers.root("dist"),
-        publicPath: "/",
-        filename: "[name].[hash].js",
-        chunkFilename: "[id].[hash].chunk.js"
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
     },
 
     plugins: [
@@ -23,10 +23,10 @@ module.exports = webpackMerge(commonConfig, {
                 keep_fnames: true
             }
         }),
-        new ExtractTextPlugin("[name].[hash].css"),
+        new ExtractTextPlugin('styles.[hash].css'),
         new webpack.DefinePlugin({
-            "process.env": {
-                "ENV": JSON.stringify(ENV)
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
             }
         }),
         new webpack.LoaderOptionsPlugin({

config/server/prod-server.js

@@ -0,0 +1,13 @@
+const liveServer = require("live-server");
+
+const params = {
+    port: 8181,
+    root: 'dist',
+    open: false,
+    ignore: 'scss,my/templates',
+    file: 'index.html',
+    wait: 1000,
+    logLevel: 2
+};
+
+liveServer.start(params);

config/test/webpack.test.js

@@ -22,12 +22,7 @@ module.exports = {
             {
                 test: /\.scss$/,
                 exclude: /node_modules/,
-                use: [ 'raw-loader', 'sass-loader' ]
-            },
-            {
-                test: /\.css$/,
-                include: helpers.root('src', 'app'),
-                use: 'raw-loader'
+                use: [ 'to-string-loader', 'css-loader', 'sass-loader' ]
             }
         ]
     },

package.json

@@ -13,7 +13,8 @@
         "coverage": "npm run lint && karma start config/test/karma.conf.js --coverage=true",
         "lint": "tslint -c config/tslint.json \"src/app/**/*.ts\"",
         "pretest": "npm run lint",
-        "build": "rimraf dist && webpack --config config/build/webpack.prod.js --progress --profile --bail"
+        "build": "rimraf dist && webpack --config config/build/webpack.prod.js --progress --profile --bail",
+        "server": "node config/server/prod-server.js"
     },
     "dependencies": {
         "@angular/common": "^4.3.6",
@@ -37,6 +38,7 @@
         "codelyzer": "~3.2.0",
         "copy-webpack-plugin": "^4.0.1",
         "css-loader": "^0.28.1",
+        "extract-text-webpack-plugin": "3.0.0",
         "file-loader": "^0.8.5",
         "html-loader": "^0.4.3",
         "html-webpack-plugin": "^2.26.0",
@@ -51,13 +53,13 @@
         "karma-jasmine-html-reporter": "^0.2.2",
         "karma-sourcemap-loader": "^0.3.7",
         "karma-webpack": "^2.0.4",
+        "live-server": "1.2.0",
         "loader-utils": "^1.1.0",
         "node-sass": "^4.5.3",
         "protractor": "~5.1.2",
-        "raw-loader": "^0.5.1",
         "reflect-metadata": "^0.1.10",
         "sass-loader": "^6.0.6",
-        "style-loader": "^0.18.2",
+        "to-string-loader": "^1.1.5",
         "tslint": "~5.7.0",
         "typescript": "~2.5.2",
         "webpack": "~3.4.1",

src/constants.scss

@@ -3,7 +3,7 @@
 $primary-color: #0064ff;
 $primary-color-light: #3f86ff;
 
-$primary-bg: #ffffff;
+$primary-bg: #000000;
 $primary-content-bg: #4b4b4b;
 
 $primary-font: Tahoma, Arial, sans-serif;

src/global.scss

@@ -6,7 +6,7 @@
 
 body {
 	background-color: $primary-bg;
-	color: $primary-color;
+	color: #ffffff;
 	font-family: $primary-font;
 	font-size: $primary-font-size;
 }