Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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
...
like image 894
Aidan Gee Avatar asked Dec 18 '14 19:12

Aidan Gee


People also ask

What is difference between Sass and node-sass?

Sass is a stylesheet language; it's just the syntax and definition. Dart-Sass and Node-Sass[1] are implementations. According to the Sass language website Dart Sass is the primary implementation of Sass. Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation.

Can you use Sass without npm?

Yes, we can compile SCSS/SASS to CSS without using any Node Command.


2 Answers

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
like image 65
Rahat Mahbub Avatar answered Oct 01 '22 03:10

Rahat Mahbub


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.

like image 21
kenny Avatar answered Oct 01 '22 02:10

kenny