Why node-sass-middleware is not working?

Question

I have installed the node-sass-middleware module on my express application, but i'm not getting that working, just because the middleware is reading an incorrect source, when i debug the console log is:

GET / 200 558.983 ms - 4651
  source: /home/karim/Snippets/my-financial/public/stylesheets/sass/stylesheets/main.sass
  dest: /home/karim/Snippets/my-financial/public/stylesheets/stylesheets/main.css
  read: /home/karim/Snippets/my-financial/public/stylesheets/stylesheets/main.css

which both directories are wrong, why the middleware is adding the string stylesheets/ between the source/dest (..public/stylesheets/sass/) and the .sass file/.css file (main.sass and main.css)?

I have this configuration inside my app.js:

var sassMiddleware = require('node-sass-middleware');
...
...
var app = express();

app.use(sassMiddleware({
  src: path.join(__dirname, 'public/stylesheets/sass'),
  dest: path.join(__dirname, 'public/stylesheets'),
  debug: true,
  indentedSyntax: true,
  outputStyle: 'compressed'
}));

Obviously this is not compiling anything, becuase the directories are wrong. Inside the ..public/stylesheets/sass/ folder i just have one file, main.sass which i want to compile and move the result outside the sass/ folder, i mean at ..public/stylesheets/.

score 12 · Accepted Answer · answered Jun 07 '15 at 23:15

That is because -- i am pretty sure -- on your html file there is something like that:

<head>

  <!--All your head stuff and-->
  <link rel="stylesheet" href="/stylesheets/main.css"/>

</head>

-- Lets call that href as yourAwesomeHref for a moment.

When your server receive any get request, the middleware will look for the compiled main.sass on /home/karim/Snippets/my-financial/public/stylesheets (dest option for the middleware) following by yourAwesomeHref, resulting this route:

/home/karim/Snippets/my-financial/public/stylesheets/stylesheets/main.css

Which that file obviously does not exist at all! So you have to add prefix: "/stylesheets" on your middleware for avoid that problem.

The final code is:

var sassMiddleware = require('node-sass-middleware');
...
...
var app = express();

app.use(sassMiddleware({
  src: path.join(__dirname, 'public/stylesheets/sass'),
  dest: path.join(__dirname, 'public/stylesheets'),
  debug: true,
  indentedSyntax: true,
  outputStyle: 'compressed',
  prefix: '/stylesheets'
}));

Why node-sass-middleware is not working?

1 Answers1

Linked