Compile styles with Webpack

Gruntfile.js

@@ -33,21 +33,12 @@ module.exports = function (grunt) {
         nospawn: true,
         livereload: LIVERELOAD_PORT
       },
-      compass: {
-        files: [
-          '<%= yeoman.app %>/styles/{,*/}*.{scss,sass}',
-          '<%= yeoman.app %>/scripts/components/**/*.{scss,sass}',
-          '<%= yeoman.app %>/node_modules/aenima/**/*.{scss,sass}'
-        ],
-        tasks: ['compass']
-      },
       livereload: {
         options: {
           livereload: grunt.option('livereloadport') || LIVERELOAD_PORT
         },
         files: [
           '<%= yeoman.app %>/*.html',
-          '<%= yeoman.app %>/styles/main.css',
           '<%= yeoman.app %>/scripts/**/*.{js,mustache}',
           '<%= yeoman.app %>/node_modules/aenima/**/*.{js,mustache}',
           '<%= yeoman.app %>/img/{,*/}*.{png,jpg,jpeg,gif,webp}',
@@ -100,39 +91,6 @@ module.exports = function (grunt) {
         '<%= yeoman.app %>/scripts/components/{,*/}*.js'
       ]
     },
-    compass: {
-      options: {
-        sassDir: '<%= yeoman.app %>/styles',
-        cssDir: '<%= yeoman.app %>/styles',
-        imagesDir: '<%= yeoman.app %>/img',
-        importPath: './',
-        relativeAssets: true
-      },
-      dist: {},
-      server: {
-        options: {
-          debugInfo: true
-        }
-      }
-    },
-    useminPrepare: {
-      html: '<%= yeoman.app %>/index.html',
-      options: {
-        dest: '<%= yeoman.dist %>'
-      }
-    },
-    usemin: {
-      html: ['<%= yeoman.dist %>/{,*/}*.html'],
-      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
-      options: {
-        dirs: ['<%= yeoman.dist %>'],
-        blockReplacements: {
-          remove: function () {
-            return '';
-          }
-        }
-      }
-    },
     imagemin: {
       dist: {
         files: [{
@@ -143,36 +101,6 @@ module.exports = function (grunt) {
         }]
       }
     },
-    cssmin: {
-      dist: {
-        files: {
-          '<%= yeoman.dist %>/styles/main.css': [
-            '<%= yeoman.app %>/styles/main.css'
-          ]
-        }
-      }
-    },
-    htmlmin: {
-      dist: {
-        options: {
-          /*removeCommentsFromCDATA: true,
-          // https://github.com/yeoman/grunt-usemin/issues/44
-          //collapseWhitespace: true,
-          collapseBooleanAttributes: true,
-          removeAttributeQuotes: true,
-          removeRedundantAttributes: true,
-          useShortDoctype: true,
-          removeEmptyAttributes: true,
-          removeOptionalTags: true*/
-        },
-        files: [{
-          expand: true,
-          cwd: '<%= yeoman.app %>',
-          src: '*.html',
-          dest: '<%= yeoman.dist %>'
-        }]
-      }
-    },
     copy: {
       fonts: {
         files: [{
@@ -196,6 +124,17 @@ module.exports = function (grunt) {
             'package.json'
           ]
         }]
+      },
+      index: {
+        files: [{
+          expand: true,
+          dot: true,
+          cwd: '.',
+          dest: '<%= yeoman.dist %>',
+          src: [
+            'index.html'
+          ]
+        }]
       }
     },
     'gh-pages': {
@@ -254,7 +193,6 @@ module.exports = function (grunt) {
     }
 
     grunt.task.run([
-      'compass:server',
       'connect:livereload',
       'open:server',
       'watch'
@@ -263,26 +201,15 @@ module.exports = function (grunt) {
 
   grunt.registerTask('build', [
     'clean:dist',
-    'compass:dist',
-    'useminPrepare',
     'exec:webpack',
     'imagemin',
-    'htmlmin',
-    'concat',
-    'cssmin',
+    'copy:index',
     'copy:fonts',
-    'usemin',
     'appcache'
   ]);
 
   grunt.registerTask('fast-build', [
-    'compass:dist',
-    'useminPrepare',
     'exec:webpack',
-    'htmlmin',
-    'concat',
-    'cssmin',
-    'usemin',
   ]);
 
   grunt.registerTask('deploy', [

index.html

@@ -6,9 +6,6 @@
     <title>Stylie</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- build:css styles/main.css -->
-    <link rel="stylesheet" href="styles/main.css">
-    <!-- endbuild -->
   </head>
   <body>
     <div id="stylie"></div>

package.json

@@ -7,6 +7,7 @@
     "backbone": "1.2.1",
     "bezierizer": "0.1.0",
     "bootstrap-sass": "3.2.0",
+    "compass-mixins": "^0.12.10",
     "jquery": "2.1.3",
     "jquery-cubelet": "~0.3.0",
     "jquery-dragon": "~0.4.7",
@@ -24,12 +25,8 @@
     "grunt-appcache": "^0.1.8",
     "grunt-bump": "0.0.17",
     "grunt-contrib-clean": "~0.5.0",
-    "grunt-contrib-compass": "^1.0.1",
-    "grunt-contrib-concat": "~0.3.0",
     "grunt-contrib-connect": "~0.6.0",
     "grunt-contrib-copy": "~0.5.0",
-    "grunt-contrib-cssmin": "~0.7.0",
-    "grunt-contrib-htmlmin": "~0.1.3",
     "grunt-contrib-imagemin": "1.0.1",
     "grunt-contrib-jshint": "~0.8.0",
     "grunt-contrib-watch": "~0.5.3",
@@ -40,8 +37,11 @@
     "grunt-usemin": "3.0.0",
     "jshint-stylish": "~0.1.5",
     "load-grunt-tasks": "~0.3.0",
+    "node-sass": "^4.3.0",
     "nodemon": "^1.9.2",
     "raw-loader": "^0.5.1",
+    "sass-loader": "^4.1.1",
+    "style-loader": "^0.13.1",
     "time-grunt": "~0.2.8",
     "webpack": "^1.14.0",
     "webpack-dev-server": "^1.16.2"

scripts/main.js

@@ -1,3 +1,4 @@
-var Stylie = require('stylie');
+require('!style-loader!raw-loader!sass-loader!../styles/main.sass');
+const Stylie = require('stylie');
 
 window.stylie = new Stylie(document.getElementById('stylie'));

webpack.config.js

@@ -57,5 +57,8 @@ module.exports = {
   ],
   devServer: {
     port: 9005
+  },
+  sassLoader: {
+    includePaths: [path.resolve(__dirname, './node_modules/compass-mixins/lib')]
   }
 };