fix(css): refactor CSS handling

Author: Awk34

Diff for: templates/app/_package.json

@@ -176,6 +176,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",<% } %>
     "karma-webpack": "^2.0.3",
+    "to-string-loader": "^1.1.5",
     <%# END WEBPACK %>
     "through2": "^2.0.1",
     "open": "~0.0.4",

Diff for: templates/app/client/app/app(css).css

@@ -55,12 +55,3 @@
 [hidden] {
   display: none !important;
 }
-
-/* Component styles are injected through gulp */
-/* inject:css */
-@import 'admin/admin.css';
-@import 'main/main.css';
-@import '../components/footer/footer.css';
-@import '../components/modal/modal.css';
-@import '../components/oauth-buttons/oauth-buttons.css';
-/* endinject */

Diff for: templates/app/client/app/app(less).less

@@ -27,8 +27,3 @@
 [hidden] {
   display: none !important;
 }
-
-/* inject:less */
-@import 'admin/admin.less';
-@import 'main/main.less';
-/* endinject */

Diff for: templates/app/client/app/app(sass).scss

@@ -38,5 +38,3 @@ $fa-font-path: '/assets/fonts/font-awesome/';
 .ng-invalid:not(form)  {
   border-left: 5px solid #a94442; /* red */
 }
-
-@import 'admin/admin.scss';

Diff for: templates/app/client/app/app(stylus).styl

@@ -1,9 +1,9 @@
 $fa-font-path = '../assets/fonts/font-awesome/'
-@import '~font-awesome-stylus/stylus/index'
+@import '~font-awesome-stylus/lib/font-awesome-stylus/index'
 
 <%_ if (filters.bootstrap) { %>
 $icon-font-path = '../assets/fonts/bootstrap/'
-@import '~bootstrap-styl/bootstrap/index';
+@import '~bootstrap/dist/css/bootstrap.css'
 <% if (filters.oauth) { %>@import '~bootstrap-social/bootstrap-social.css'
 <% } %><% } %>
 
@@ -25,9 +25,3 @@ $icon-font-path = '../assets/fonts/bootstrap/'
 
 [hidden]
   display: none !important
-
-// Component styles are injected through gulp
-/* inject:styl */
-@import "admin/admin"
-@import "main/main"
-/* endinject */

Diff for: templates/app/client/app/app.js

@@ -1,4 +1,4 @@
-import 'style-loader!./app.<%= styleExt %>';
+import './app.<%= styleExt %>';
 
 import './polyfills';
 

Diff for: templates/app/webpack.make.js

@@ -192,38 +192,70 @@ module.exports = function makeWebpackConfig(options) {
             // Reference: https://github.com/postcss/postcss-loader
             // Postprocess your css with PostCSS plugins
             test: /\.css$/,
-            use: ['raw-loader', 'css-loader', 'postcss-loader'],
+            use: ['style-loader', 'css-loader', 'postcss-loader'],
             include: [
-                path.resolve(__dirname, 'client')
+                path.resolve(__dirname, 'node_modules/bootstrap/dist/css/*.css'),
+                path.resolve(__dirname, 'client/app/app.css')
             ]
-        }<% if(!filters.css) { %>, {
-            <%_ if(filters.sass) { _%>
+        }<%_ if(filters.css) { _%>, {
+            // CSS LOADER
+            // Reference: https://github.com/webpack/css-loader
+            test: /\.css$/,
+            use: ['to-string-loader', 'css-loader?sourceMap', 'postcss-loader'],
+            include: [
+                path.resolve(__dirname, 'client')
+            ],
+            exclude: [/app\.css$/]
+        }<%_ } else if(filters.sass) { _%>, {
             // SASS LOADER
             // Reference: https://github.com/jtangelder/sass-loader
             test: /\.(scss|sass)$/,
-            use: ['raw-loader', 'sass-loader'],
+            use: ['style-loader', 'css-loader?sourceMap', 'sass-loader'],
             include: [
                 path.resolve(__dirname, 'node_modules/bootstrap-sass/assets/stylesheets/*.scss'),
+                path.resolve(__dirname, 'client/app/app.scss')
+            ]
+        }, {
+            // SASS LOADER
+            // Reference: https://github.com/jtangelder/sass-loader
+            test: /\.(scss|sass)$/,
+            use: ['to-string-loader?sourceMap', 'css-loader?sourceMap', 'sass-loader?sourceMap'],
+            include: [
                 path.resolve(__dirname, 'client')
-            ]<% } %>
-            <%_ if(filters.less) { _%>
+            ],
+            exclude: [/app\.scss$/]
+        }<% } else if(filters.less) { %>, {
             // LESS LOADER
-            // Reference: https://github.com/
             test: /\.less$/,
-            use: ['raw-loader', 'less-loader'],
+            use: ['style-loader', 'css-loader?sourceMap', 'less-loader'],
             include: [
                 path.resolve(__dirname, 'node_modules/bootstrap/less/*.less'),
+                path.resolve(__dirname, 'client/app/app.less')
+            ]
+        }, {
+            // LESS LOADER
+            test: /\.less$/,
+            use: ['to-string-loader?sourceMap', 'css-loader?sourceMap', 'less-loader'],
+            include: [
                 path.resolve(__dirname, 'client')
-            ]<% } %>
-            <%_ if(filters.stylus) { _%>
+                ],
+            exclude: [/app\.less$/]
+        }<% } else if(filters.stylus) { %>, {
             // Stylus LOADER
-            // Reference: https://github.com/
             test: /\.styl$/,
-            use: ['raw-loader', 'stylus-loader'],
+            use: ['style-loader', 'css-loader?sourceMap', 'stylus-loader'],
             include: [
                 path.resolve(__dirname, 'node_modules/bootstrap-styl/bootstrap/*.styl'),
+                path.resolve(__dirname, 'client/app/app.styl')
+            ]
+        }, {
+            // Stylus LOADER
+            test: /\.styl$/,
+            use: ['to-string-loader?sourceMap', 'css-loader?sourceMap', 'stylus-loader'],
+            include: [
                 path.resolve(__dirname, 'client')
-            ]<% } %>
+            ],
+            exclude: [/app\.styl$/]
         }<% } %>]
     };