CODEWITHSUNDEEP
node.jsexpresssass
b_archer
b_archer

Reputation: 317

node-sass configuration not rendering stylesheets to page (express)

I'm having trouble rendering stylesheets to the page in my node app using the node-sass library. The server returns 200, and I can inspect the main.scss using dev tools, but the content page is not actually modified.

I have already made sure that the express.static directive comes after sass.middleware, and added sass.render (now removed) inside of my one route to attempt to error log. It returned no error. Also, index.html contains <link rel="stylesheet" href="stylesheets/main.scss">. Any help is greatly appreciated!

directories:

├── app.js
├── launch.sh
├── package.json
├── public
│   ├── index.html                                                                                                                                          
│   └── stylesheets                                                                    
│       └── main.scss                                                                     
└── spec                                                                                  
    ├── unit.js                                                                           
    └── unitExamples.js

app.js:

var express = require('express'),
    sass    = require('node-sass'),
    path    = require('path'),
    app     = express();

app.configure(function(){
  app.use(express.logger('dev'));
  app.use(express.urlencoded());
  app.use(express.json());
  app.use(
    sass.middleware({
      src: __dirname + '/public/stylesheets',
      dest: __dirname + '/public/',
      debug: true,
      outputStyle: 'compressed'
    })
  );
  app.use(express.static(path.join(__dirname, 'public')));
});

app.get('/', function(req,res){
  res.sendfile(path.join(__dirname, '/public/index.html'));
});

var port = process.env.PORT || 8080;
app.listen(port);
console.log("App listening on port " + port);

Upvotes: 0

Views: 643

Answers (1)

Darkhogg
Darkhogg

Reputation: 14175

You should be referencing the target css file, not its source:

<link rel="stylesheet" href="/main.css">

Also, SCSS files should not be accessible from the outside world, so they should be moved out of public.

Upvotes: 1

Related Questions