CODEWITHSUNDEEP
node.jssassnode-sass
CodyBugstein
CodyBugstein

Reputation: 23322

node-sass-middleware is not doing anything

I'm trying to use node-sass-middleware but it is not creating a .css of my .scss file.

My file structure (simplified) is

- node-modules
- public
     |- common
     |     |-sass
     |     |     |-style.scss
     |     |-css
- server.js

and the code in server.js has

var cssLoc =  __dirname + "\\public\\common\\css";
var cssDest =  __dirname + "\\public\\common";
console.log(cssLoc);
console.log(cssDest);
app.use(sass({
    src: cssLoc,
    dest: cssDest,
    debug: true,
    outputStyle: 'compressed'
}));

app.use(express.static(__dirname + '/public'));

I have no idea why this isn't working. It is very frustrating.

Upvotes: 0

Views: 1973

Answers (2)

Nick Bergquist
Nick Bergquist

Reputation: 111

Using the original example with the following directory structure:

- node-modules
- public
     |- common
     |     |-sass
     |     |     |-style.scss
     |     |-css
- server.js

In server.js where you are calling the node-sass-middleware it looks like you have the src and dest properties set incorrectly. For example,

var cssLoc =  __dirname + "\\public\\common\\css";

which is being used to populate the src property should be the path to your *.scss file but instead is pointing to your CSS destination directory. Similarly, the dest property,

var cssDest =  __dirname + "\\public\\common";

is not pointing to the CSS directory but its parent.

In the sass-node-middleware block you have debug: true set so you should be able to view the paths used in your console from where your launched the application to verify whether they are correct or not:

app.use(sass({
    src: cssLoc,
    dest: cssDest,
    debug: true,
    outputStyle: 'compressed'
}));

This could be refactored to:

app.use(sass({
    src: path.join(__dirname, 'public', 'common', 'sass'),
    dest: path.join(__dirname, 'public', 'common', 'css'),
    debug: true,
    outputStyle: 'compressed'
}));

That should get your SASS compiled into CSS but as the previous answer by SirRodge mentioned you still have your path to resolve for the the get request of the CSS. If you are using the express.static built-in middleware, app.use(express.static(path.join(__dirname, 'public'))); to serve files from a directory named public and in your HTML you are referencing the CSS by say /common/css/style.css then you need to add the prefix property to the middleware:

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

Upvotes: 0

SirRodge
SirRodge

Reputation: 644

The very likely reason that it's not working is because confusingly the node-sass-middleware will take the path specified on its src and dest properties and then look at the local css file references in your html tags, grab the paths they reference, and look for those exact paths in the src and dest paths specified.

Example(in your app.js file):

var nodeSassMiddleware = require('node-sass-middleware');

app.use(nodeSassMiddleware({
   src: path.join(__dirname, 'assets'),
   dest: path.join(__dirname, 'public')
});

Then in your base html file contains a link tag like so:

<link rel="stylesheet" type="text/css" href="/immediate/style.css"

node-sass-middleware will look for /assets/immediate/style.scss and output that file to /public/immediate/style.css

It's actually quite nifty once you realize what's going on :), fire up your server in your console and visit the link in the browser and you the console will log the actual source and destination paths being used.

Banged my head against the wall a while figuring this out, hope it helps!

Upvotes: 9

Related Questions