Destination CSS file doesn't exist

[NetOpWibby]

Hey everyone,

I would like my Sass files to be compiled to a different folder, not the same folder as my Sass files, but dest isn't respected for some reason. Neither is outFile. Has anyone else gotten this to work?

[am11]

Hi, can you share an example which is failing?

I have just tested https://github.com/andrew/node-sass-example with latest stable node-sass-middleware and connect (-> npm i node-sass-middleware connect), but could not reproduce the issue:

Changed:

var destPath = __dirname + '/public/styles/';

to:

var destPath = __dirname + '/public/new-styles/';

in server.js - line 5 and same line number in index.html as "new-styles/main.css" creates a new directory {cwd}/public/new-style with main.css on subsequent request.

[NetOpWibby]

I was doing the exact same thing as the example you've tested with, but I'm not using Connect, I'm using FeathersJS.

[bnolan]

I'm having this on ocassional reloads using the example express code. Is this middleware kind of broken?

[BodySplash]

I had the same issue, but then I realised it was just a matter of setting correctry the "prefix" option.
My pages look for css files with a path like "/styles/file.css"

here is my working conf :

{
    src: path.join(__dirname, 'scss'),
    dest: path.join(__dirname, 'public', 'styles'),
    prefix: '/styles'

}

Hope that helps

[Mr-Newlove]

I'm having the same issue, here is my middleware code:

  // adding the sass middleware
  app.use(sassMiddleware({
  	/* Options */
  	src: path.join(__dirname, "public/sass"),
  	dest: path.join(__dirname, "public/css"),
  	debug: true,
  	outputStyle: 'compressed',
    prefix:  '/static/css'  // Where prefix is at <link rel="stylesheets" href="prefix/style.css"/>
}));
app.use(express.static(path.join(__dirname, 'public')));

I get this on the console:

  source: ~\public\sass\style.scss
  dest: ~\public\css\style.css
  read: ~\public\css\style.css

But the css file is never rendered and the website doesnt recive the file.

Here is my dependency list from package.json for more info:

"dependencies": {
    "ejs": "~2.5.2",
    "express": "~4.14.0",
    "node-sass": "^3.13.0",
    "node-sass-middleware": "^0.10.0"
  }

[am11]

@theshadow124, here is how I managed to make your example work:

File - c:\temp\projectx\my-server.js:

var sassMiddleware = require('node-sass-middleware');
var app = require('express')();
var serveStatic = require('serve-static');
var join = require('path').join;
var http = require('http');
var port = process.env.PORT || 8000;

var myPrefix = '/static/css';
var destination = join(__dirname, 'public/css');

// Sass middleware
app.use(sassMiddleware({
  /* Options */
  src: join(__dirname, 'public/sass'),
  dest: destination,
  debug: true,
  outputStyle: 'compressed',
  prefix: myPrefix 
}));

// static middleware
app.use(myPrefix, serveStatic(destination));

// start server
http.createServer(app).listen(port);

Assuming you have c:\temp\projectx\public\sass\test.scss source file; in a web browser, navigate to http://localhost:8000/static/css/test.css (notice the format: {protocol}://{host}:{port}/{prefix}/{cssFilename}.css).

[Mr-Newlove]

I never get the file no matter what, from my above post, it never saves the file even once.

I've also made a post on stackoverflow: http://stackoverflow.com/questions/40711155/node-sass-middleware-not-rendering-using-express

[am11]

Ok, disregard my comment about destination slug (removed). Here is the example project: smw-test.zip

• Extract zip smw-test.zip as smw-test/.
• Then execute npm i && node my-server.
• Browse to http://localhost:8000/static/css/test.css.

I was mistaken, we don't need to specify destination slug and static middleware should be configured as app.use(myPrefix, serveStatic(destination)); (fixed in above comment as well). Also the source and destination follow the same sub-directory structure, so if you call something like http://localhost:8000/static/css/some/sub/directory/test.css, then it looks the source file at the same structure under source directory like public/sass/some/sub/directory/test.scss.

[Mr-Newlove]

Great, I'm convinced it is some sort of permission issue at this point, even though I'm on windows. I ran your script, it ran fine, copied and pasted the content of your server file into mine and then it does the same thing. I've checked, the files are NOT read only.

I'll keep screwing with it.

[Mr-Newlove]

update to my issue, my filename was .sass, I thought this was valid, renaming to .scss fixed the issue

[am11]

@NetOperatorWibby, I have tested the current behavior with connect and express multiple times: #70 (comment). Please try reconfiguring feather.js with node-sass-middleware v0.10.x. I am closing this for now.

Feel free to reopen or create a new issue (with steps to repro), if you are still getting problems.

[NetOpWibby]

@am11 I'm not using this anymore but I'm glad it works well now!