Azure · timotheeguerin · Apr 14, 2017 · Apr 13, 2017 · Apr 13, 2017 · Apr 13, 2017
@@ -12,8 +12,8 @@ import "./utils/extensions";
 
 import "font-awesome/css/font-awesome.min.css";
 import "roboto-fontface/css/roboto/roboto-fontface.css";
-import "./assets/styles/main.scss";
 import "./environment";
+import "./styles/main.scss";
 
 (remote.getCurrentWindow() as any).splashScreen.updateMessage("Initializing app");
 const platform = platformBrowserDynamic();

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, OnChanges, ViewChild } from "@angular/core";
+import { Component, ElementRef, Input, OnChanges, ViewChild, ViewEncapsulation } from "@angular/core";
 import { List } from "immutable";
 import { Observable } from "rxjs";
 
@@ -7,6 +7,8 @@ import { log } from "app/utils";
 @Component({
     selector: "bl-tags",
     templateUrl: "tags.html",
+    styleUrls: ["tags.scss"],
+    encapsulation: ViewEncapsulation.None,
 })
 export class TagsComponent implements OnChanges {
     @Input()

@@ -1,3 +1,5 @@
+@import "app/styles/variables";
+
 .tag-list {
     display: flex;
     align-items: center;

@@ -0,0 +1,3 @@
+# This contains the common styles to be used in the application
+
+To style a single component prefer using the angular2 `styleUrls` attribute and have the style file next to the component file.
@@ -1,7 +1,3 @@
-
-@import "../theme/variables";
-@import "../theme/mixins";
-
 .required-alert, bl-error {
     color: $validation-error-color;
 }

@@ -1,8 +1,4 @@
-
-@import "../theme/variables";
-@import "../theme/mixins";
-
-/*--------------------------------------------------------------------------------------
+/*--------------------------------------------------------------------------------------
 -------------------------			MAIN LAYOUT  				------------------------
 --------------------------------------------------------------------------------------*/
 * {

@@ -1,7 +1,3 @@
-
-@import "../theme/variables";
-@import "../theme/mixins";
-
 html, body, button {
     margin: 0;
     padding: 0;

@@ -1,5 +1,9 @@
-@import "variables";
-@import "mixins";
+@import "../variables";
+@import "../mixins";
+
+/**
+ * This file contains default override for native elements(a, p h1,h2,etc.)
+ */
 
 body {
     font-family: $baseFontFamily;
@@ -34,7 +38,7 @@ h1, h2, h3, h4, h5, h6 {
     display: block;
     color: $headings-color;
     font-weight: 300;
-    
+
     small {
         font-weight: normal;
         line-height: 1;
@@ -54,4 +58,4 @@ h5 { font-size: $h5FontSize; }
 h6 {
     font-size: $h6FontSize;
     line-height: 19px;
-} 
+}
@@ -1,7 +1,7 @@
 // Themes
-@import "./theme/variables";
-@import "./theme/mixins";
-@import "./theme/type";
+@import "./variables";
+@import "./mixins";
+@import "./common/type";
 
 // Base styles
 @import "./base/banner";
@@ -23,7 +23,6 @@
 @import "./base/advanced-filter";
 @import "./base/server-error";
 @import "./base/table";
-@import "./base/tags";
 
 // Account styles
 @import "./account/details";

@@ -1,5 +1,3 @@
-@import "../theme/variables";
-
 .fa-refresh {
     color: map-get($md-prussian-blue, 300);
 }

@@ -1,5 +1,3 @@
-@import "../theme/mixins";
-
 .content-wrapper {
     position: relative;
 
@@ -10,7 +8,7 @@
         left: 0;
         right: 0;
         top: 100px;
-        
+
         &.loading {
             visibility: visible;
             display: block;

@@ -1,5 +1,5 @@
-@import "./material-colors";
-@import "./zindex";
+@import "./vars/material-colors";
+@import "./vars/zindex";
 
 $orient: #00528c;
 $regal-blue: #00416f;

@@ -0,0 +1 @@
+
@@ -1,4 +1,3 @@
-@import "../theme/variables";
 @import "~@angular/material/core/theming/all-theme";
 // Plus imports for other components in your app.
 

@@ -29,6 +29,16 @@ const baseConfig = {
                 loaders: ["awesome-typescript-loader", "angular2-template-loader"],
                 exclude: [/node_modules/],
             },
+            {
+                test: /\.css$/,
+                use: ["to-string-loader", "css-loader"],
+                include: [helpers.root("app", "components")]
+            },
+            {
+                test: /\.scss$/,
+                use: ["to-string-loader", "css-loader", "sass-loader"],
+                include: [helpers.root("app", "components")]
+            },
             {
                 test: /\.html$/,
                 loader: "raw-loader",
@@ -51,6 +61,7 @@ const baseConfig = {
     },
     plugins: [
         new CheckerPlugin(),
+
         new CopyWebpackPlugin([
             { from: "./client/splash-screen/**/*" },
         ]),

@@ -32,16 +32,12 @@ module.exports = merge(config, {
             {
                 test: /\.scss$/,
                 loader: "style-loader!css-loader!sass-loader",
-                exclude: [helpers.root("app", "components")]
-            },
-            {
-                test: /\.scss$/,
-                use: ["to-string-loader", "css-loader", "sass-loader"],
-                include: [helpers.root("app", "components")]
+                exclude: [helpers.root("app", "components")],
             },
             {
                 test: /\.css$/,
                 loader: "style-loader!css-loader",
+                exclude: [helpers.root("app", "components")],
             }
         ],
     },

@@ -48,29 +48,16 @@ module.exports = merge(config, {
     },
     module: {
         rules: [
-            /**
-             * Extract CSS files from node_modules and the assets directory to external CSS file
-             */
-            {
-                test: /\.css$/,
-                loader: ExtractTextPlugin.extract({
-                    fallback: "style-loader",
-                    use: "css-loader"
-                }),
-                include: [/node_modules/, helpers.root("app", "assets", "styles")]
-            },
-            /**
-             * Extract and compile SCSS files from .node_modules and the assets directory to external CSS file
-             */
-            {
+             {
                 test: /\.scss$/,
-                loader: ExtractTextPlugin.extract({
-                    fallback: "style-loader",
-                    use: "css-loader!sass-loader"
-                }),
-                include: [/node_modules/, helpers.root("app", "assets", "styles")]
+                loader: "style-loader!css-loader!sass-loader",
+                exclude: [helpers.root("app", "components")],
             },
-
+            {
+                test: /\.css$/,
+                loader: "style-loader!css-loader",
+                exclude: [helpers.root("app", "components")],
+            }
         ]
 
     },
@@ -108,42 +95,43 @@ module.exports = merge(config, {
          * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
          */
         // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
-        new UglifyJsPlugin({
-            beautify: true, // debug
-            mangle: false, //debug
-            // compress: {
-            //   screw_ie8: true,
-            //   keep_fnames: true,
-            //   drop_debugger: false,
-            //   dead_code: false,
-            //   unused: false
-            // }, // debug
-            // output: {
-            //     comments: true
-            // }, // Debug
+        // Disable uglify unti it supports ES6 correctly
+        // new UglifyJsPlugin({
+        //     beautify: true, // debug
+        //     mangle: false, //debug
+        //     // compress: {
+        //     //   screw_ie8: true,
+        //     //   keep_fnames: true,
+        //     //   drop_debugger: false,
+        //     //   dead_code: false,
+        //     //   unused: false
+        //     // }, // debug
+        //     // output: {
+        //     //     comments: true
+        //     // }, // Debug
 
-            // beautify: false, //prod
-            output: {
-                comments: false
-            }, //prod
-            // mangle: {
-            //     screw_ie8: true,
-            //     keep_fnames: true,
-            // }, //prod
-            compress: {
-                screw_ie8: true,
-                warnings: false,
-                conditionals: true,
-                unused: true,
-                comparisons: true,
-                sequences: true,
-                dead_code: true,
-                evaluate: true,
-                if_return: true,
-                join_vars: true,
-                negate_iife: false // we need this for lazy v8
-            },
-        }),
+        //     // beautify: false, //prod
+        //     output: {
+        //         comments: false
+        //     }, //prod
+        //     // mangle: {
+        //     //     screw_ie8: true,
+        //     //     keep_fnames: true,
+        //     // }, //prod
+        //     compress: {
+        //         screw_ie8: true,
+        //         warnings: false,
+        //         conditionals: true,
+        //         unused: true,
+        //         comparisons: true,
+        //         sequences: true,
+        //         dead_code: true,
+        //         evaluate: true,
+        //         if_return: true,
+        //         join_vars: true,
+        //         negate_iife: false // we need this for lazy v8
+        //     },
+        // }),
 
         new LoaderOptionsPlugin({
             minimize: true,

@@ -1,6 +1,7 @@
 const DefinePlugin = require("webpack/lib/DefinePlugin");
 const config = require("./webpack.config.base");
 const webpack = require("webpack");
+const helpers = require("./helpers");
 const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
 
 const ENV = "test";
@@ -21,11 +22,12 @@ config.module.rules = config.module.rules.concat(
         {
             test: /\.scss$/,
             loader: "style-loader!css-loader!sass-loader",
+            exclude: [helpers.root("app", "components")]
         },
         {
             test: /node_modules.*\.css$/,
             loader: "style-loader!css-loader",
-        },
+        }
     ]
 );
 module.exports = config;
@@ -7,12 +7,12 @@ Official documentation from angular https://angular.io/docs/ts/latest/api/core/i
 1. Name the file in this format `do-something.component.ts`
 2. Name the class inside `class DoSomethingComponent`
 3. Name the compoennt selector `bl-do-something`
-
+4. Name the template and the css file the same as the component `do-something.html` and `do-something.scss`
 
 Note: TSLint will complain if you don't follow the format for #2 and 3
 
 ## Component template
-You can either have the template be inline with
+You can either have the template be inline(Only use this if the template is extremely simple - 3 lines max)
 ```typescript
 @Component({
   ...
@@ -33,6 +33,31 @@ Or in a sperated file. If so name the file with the same name as the component `
 <div>Show something</div>
 ```
 
+## Style your component
+Prefer use of the angular2 `styleUrls` attribute on the component decorator.
+Add a style file in the same folder as your component(If the folder is getting to crowded maybe move each component in its own sub folder)
+
+```ts
+import { ViewEncapsulation } from "@angular/core";
+@Component({
+    ...
+    styleUrls: ["do-something.scss"],
+    encapsulation: ViewEncapsulation.None, // Set enapsulation to none so angular doesn't modify the styles
+});
+```
+
+Then in `do-something.scss`
+```scss
+@import "app/styles/variables"; // Import variables
+
+bl-do-something {
+    .class1 {
+        color: red;
+    }
+}
+
+```
+
 ## Do something on input
 Maybe unclear in the offical angular2 doc you have 2 options here, given the following input:
 ```typescript

@@ -18,4 +18,4 @@ import "hammerjs";
 import "moment-duration-format";
 import "../utils/matchers";
 
-import "../../app/assets/styles/main.scss";
+import "../../app/styles/main.scss";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# This contains the common styles to be used in the application

		To style a single component prefer using the angular2 `styleUrls` attribute and have the style file next to the component file.