Aidan Gee
Aidan Gee

Reputation: 579

node-sass-middleware not compiling

Im trying to get the node-sass-middleware working with with express. The app runs with no errors

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

var routes = require('./routes/index');

var app = express();

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
//---- LOAD SASS -----//
// adding the sass middleware
var srcPath = __dirname + '/scss';
var destPath = __dirname + '/public/stylesheets';
app.use(sassMiddleware({
  src: srcPath,
  dest: destPath,
  debug: true,
  outputStyle: 'compressed'
}));

app.use(express.static(path.join(__dirname, 'public')));

Can anyone see anything wrong with the way I'm attempting to compile the sass?

file structure :

app
controllers
routes
public
-stylesheets
scss
...

Upvotes: 14

Views: 9472

Answers (3)

kenny
kenny

Reputation: 1776

A problem could also be that you want to compile scss

instead of sass. Therefore set indentedSyntax to false.

app.use(require('node-sass-middleware')({
  src: path.join(__dirname, 'scss'),
  dest: path.join(__dirname, 'public'),
  indentedSyntax : false,
  sourceMap: true
}));

Or remove it completly. Express-generator adds this value on default.

Upvotes: 5

Rahat Mahbub
Rahat Mahbub

Reputation: 2987

This is how app.js should be:

app.use(sassMiddleware({
  src: srcPath,
  dest: destPath,
  debug: true,
  outputStyle: 'compressed'
}),
express.static(path.join(__dirname, 'public')));

Also your main scss file should be named style.scss and be inside scss/stylesheets/ directory.

You should see a log like this, if you have correctly loaded the module:

  source : /Users/abc/Desktop/SO/SO_node/scss/stylesheets/style.scss
  dest : /Users/abc/Desktop/SO/SO_node/public/stylesheets/stylesheets/style.css
  read : /Users/abc/Desktop/SO/SO_node/public/stylesheets/stylesheets/style.css
  render : /Users/abc/Desktop/SO/SO_node/scss/stylesheets/style.scss

Upvotes: 10

Thomee
Thomee

Reputation: 59

Better go for grunt-sass. Simple configuration, automated task (thanks to grunt) and also faster compiling time because of libsass, which is the C version of the original Ruby compiler for SASS. Compile sass/scss files in 0.3 seconds instead of 3.

Upvotes: 0

Related Questions