title: expressjs 4 serving CSS file with HTML in it instead of the expected CSS
body: <p>Express 4 is serving a <code>style.css</code> file but not the one that grunt-sass is compiling which is <code>public/stylesheets/style.css</code>. What is stranger is that the <code>style.css</code> file that is being served contains the compressed HTML code that is being generated from the <code>app/views/index.jade</code> file. Any ideas what is happening here?</p>
  
  <h2>My Project Info &amp; Files</h2>
  
  <hr>
  
  <p>my <code>app/views/index.jade</code>   </p>
  
  <pre><code>doctype html
  
  html
    head
      link(href="/favicon.ico", rel="shortcut icon", type="image/x-icon")
      link(rel="stylesheet", href="/public/stylesheets/style.css")
    body
      h1 Hello World
      script(src='http://localhost:35729/livereload.js')
  </code></pre>
  
  <hr>
  
  <p>my <code>scss/style.scss</code></p>
  
  <pre><code>h1 { color : red; }
  </code></pre>
  
  <hr>
  
  <p>my <code>public/stylesheets/style.css</code> that is generated upon running <code>grunt</code>. so this is proof that my <code>scss/style,scss</code> is being compiled properly</p>
  
  <pre><code>h1{color:red;}
  </code></pre>
  
  <hr>
  
  <p>my <code>server.js</code></p>
  
  <pre><code>var express = require('express'),
      path = require('path');
  
  var env = process.env.NODE_ENV = process.env.NODE_ENV || 'development';
  
  var app = express();
  
  app.set('views', path.join(__dirname, '/app/views'));
  app.set('view engine', 'jade');
  app.use(express.static(__dirname + '/public'));
  
  // make sure to coordinate client side and server side routes
  app.get('*', function(req, res) {
    res.render('index');
  });
  
  var port = 3030;
  app.listen(port);
  console.log('Listening on port ' + port + '...');
  </code></pre>
  
  <hr>
  
  <p>my <code>Gruntfile.js</code> </p>
  
  <pre><code>module.exports = function(grunt) {
    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'), 
  
      sass: {
        options: {
          includePaths: ['public/vendor/foundation/scss']
        },
        dist: {
          options: {
            outputStyle: 'compressed'
          },
          files: {
            'public/stylesheets/style.css' : 'scss/style.scss'
          }
        }
      },
  
      watch: {
        source: {
          files: ['scss/**/*.scss', 'Gruntfile.js'],
          tasks: ['sass'],
          options: {
            livereload: true
          }
        }
      }
    });
  
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
  
    grunt.registerTask('default', ['sass','watch']);
  }
  </code></pre>
  
  <hr>
  
  <p>my <code>package.json</code></p>
  
  <p>{
    "name": "my-project",
    "private": true,
    "scripts": {
      "start": "nodemon server.js"
    },
    "dependencies": {
      "jade": "<em>",
      "mongodb": "</em>",
      "monk": "*",
      "less": "^1.7.0",
      "express": "^4.1.2"
    },
    "devDependencies": {
      "grunt": "^0.4.4",
      "grunt-sass": "^0.12.1",
      "grunt-contrib-watch": "^0.6.1",
      "node-sass": "^0.8.6"
    }
  }</p>
  
  <hr>
  
  <p>my project tree</p>
  
  <pre><code>.
  ├── app
  │   └── views
  │       └── index.jade
  ├── bower.json
  ├── class3s.js
  ├── Gruntfile.js
  ├── node_modules
  │   ├── express
  │   ├── grunt
  │   ├── grunt-contrib-watch
  │   ├── grunt-sass
  │   ├── jade
  │   ├── mongodb
  │   ├── monk
  │   ├── node-sass
  │   └── npm-debug.log
  ├── old-server.js
  ├── package.json
  ├── public
  │   ├── images
  │   ├── javascripts
  │   ├── stylesheets
  │   └── vendor
  ├── README.md
  ├── routes
  │   ├── index.js
  │   └── user.js
  ├── scss
  │   ├── _settings.scss
  │   └── style.scss
  └── server.js
  </code></pre>
  
  <hr>
  
  <p>the <code>style.css</code> that chromium shows me in Developer Tools</p>
  
  <p><img src="https://i.stack.imgur.com/gsJDd.png" alt="enter image description here"></p>
  
  <p>Here it is in full:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"&gt;&lt;link rel="stylesheet" href="/public/stylesheets/style.css"&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;Hello World&lt;/h1&gt;&lt;script src="http://localhost:35729/livereload.js"&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>