Express 4 is serving a style.css
file but not the one that grunt-sass is compiling which is public/stylesheets/style.css
. What is stranger is that the style.css
file that is being served contains the compressed HTML code that is being generated from the app/views/index.jade
file. Any ideas what is happening here?
My Project Info & Files
my app/views/index.jade
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')
my scss/style.scss
h1 { color : red; }
my public/stylesheets/style.css
that is generated upon running grunt
. so this is proof that my scss/style,scss
is being compiled properly
h1{color:red;}
my server.js
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 + '...');
my Gruntfile.js
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']);
}
my package.json
{
"name": "my-project",
"private": true,
"scripts": {
"start": "nodemon server.js"
},
"dependencies": {
"jade": "",
"mongodb": "",
"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"
}
}
my project tree
.
├── 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
the style.css
that chromium shows me in Developer Tools
Here it is in full:
<!DOCTYPE html><html><head><link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"><link rel="stylesheet" href="/public/stylesheets/style.css"></head><body><h1>Hello World</h1><script src="http://localhost:35729/livereload.js"></script></body></html>