web-dev-qa-db-fra.com

Obtenez SASS pour l'autocompilation avec NodeJS Express et node-sass

Je développe en utilisant node.js, et au lieu d'écrire css, j'aimerais écrire des fichiers SCSS qui se compilent automatiquement chaque fois que je rafraîchis la page.

Comment puis-je obtenir des fichiers SASS à l'autocompilation lorsque j'utilise NodeJS, Express et node-sass.

node.jsexpresssassnode-sass
26
Izhaki

Mise à jour (7 décembre 2014)

Le middleware de connexion de node-sass a été extrait dans node-sass-middleware , voir cette réponse

Installer node-sass

Dans votre dossier de projet, exécutez:

$ npm install node-sass

Modifier app.js

En supposant que vous avez généré votre application à l'aide

$ express my_app

Votre app.js devrait ressembler à ceci:

var express = require('express'),
    routes  = require('./routes');

var app = module.exports = express.createServer();

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

....

Voici les modifications:

var express = require('express'),
    routes  = require('./routes'),
    sass    = require('node-sass'), // We're adding the node-sass module
    path    = require('path');      // Also loading the path module

var app = module.exports = express.createServer();

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);

  // notice that the following line has been removed
  // app.use(express.static(__dirname + '/public'));

  // adding the sass middleware
  app.use(
     sass.middleware({
         src: __dirname + '/sass', 
         dest: __dirname + '/public',
         debug: true,       
     })
  );   

  // The static middleware must come after the sass middleware
  app.use(express.static( path.join( __dirname, 'public' ) ) );
});

Il est important de noter que

app.use( sass.middleware ... );

doit venir avant

app.use( express.static ... )

La raison en est que nous voulons d'abord que sass compile tous les fichiers sass qui ont changé, puis les serve (ce qui est fait par express.static).

Redémarrez votre application

Vous devez redémarrer votre application pour que ces modifications aient lieu.

Incluez-le quelque part pour qu'il compile

Nous pouvons maintenant inclure app.scss dans notre /sass dossier. Mais il ne compilera pas encore. Le middleware sass compilera uniquement les fichiers demandés par vos applications, nous devons donc inclure le fichier css (à rendre) quelque part, comme dans `/views/layout.jade ':

doctype html
html(lang="en")
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel="stylesheet", href="app.css")                 < we've added this
  body!= body `/views/layout.jade`

Notez que contrairement à style.css qui se trouve dans le sous-dossier stylesheets, le app.css est lu depuis la racine (dans ce cas /public).

Fixation des chemins

Avec

  app.use(
     sass.middleware({
         src: __dirname + '/sass', 
         dest: __dirname + '/public',
         debug: true,       
     })
  );

Après la première compilation, la hiérarchie des fichiers et des dossiers ressemblera à ceci:

Project folder
    app.js
    public
        app.css           < This is where the compiled file goes
        sytlesheets
            style.css
    sass
        app.scss          < This is where the sass file is

Vous souhaiterez peut-être avoir la sortie compilée dans le dossier stylesheets, plutôt que dans le dossier public; ainsi:

Project folder
    app.js
    public
        sytlesheets
            app.css
            style.css
    sass
        app.scss

De cette façon, la vue sera liée aux fichiers css comme suit:

link(rel='stylesheet', href='/stylesheets/style.css')
link(rel="stylesheet", href="/stylesheets/app.css")

Cependant, si vous changez la configuration du middleware sass en

  app.use(
     sass.middleware({
         src: __dirname + '/sass', 
         dest: __dirname + '/public/stylesheets',
         debug: true,       
     })
  );

les choses prendront la forme d'une poire.

Lors de la liaison au fichier css comme suit:

link(rel="stylesheet", href="stylesheets/app.css")

la demande résultante sera pour stylesheets/app.css. Mais depuis que nous avons donné au middleware sass la configuration suivante:

src: __dirname + '/sass',

il ira chercher /sass/stylesheets/app.scss, et aucun fichier de ce type n'existe.

Une solution consiste à conserver la configuration telle quelle, mais placez tous les fichiers sass dans le sous-dossier `/ sass/stylesheets /. Mais il y a une meilleure solution.

Si vous définissez une configuration de préfixe comme ceci:

app.use(
    sass.middleware({
        src: __dirname + '/sass', 
        dest: __dirname + '/public/stylesheets',
        prefix:  '/stylesheets',                    // We've added prefix
     })
);

il indiquera au compilateur sass que le fichier de demande sera toujours préfixé avec /stylesheets et ce préfixe doit être ignoré, donc pour une demande de /stylesheets/app.css, le middleware sass recherchera le fichier /sass/app.scss plutôt que /sass/stylesheets/app.scss.

Code final

app.js

var express = require('express'),
    routes  = require('./routes'),
    sass    = require('node-sass'),
    path    = require('path');

var app = module.exports = express.createServer();

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);

  app.use(
     sass.middleware({
         src: __dirname + '/sass', 
         dest: __dirname + '/public/stylesheets',
         prefix:  '/stylesheets',
         debug: true,         
     })
  );   

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

});

layout.jade

doctype html
html(lang="en")
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel="stylesheet", href="/stylesheets/app.css")
  body!= body

Dossiers et fichiers

Project folder
    app.js
    public
        sytlesheets
            app.css
            style.css
    sass
        app.scss
70
Izhaki

Le middleware de connexion de node-sass a été extrait dans node-sass-middleware . Utilisez comme suit:

var fs = require('fs'),
  path = require('path'),
  express = require('express'),
  sassMiddleware = require('node-sass-middleware')

var app = module.exports = express();

// adding the sass middleware
app.use(
  sassMiddleware({
    src: __dirname + '/sass',
    dest: __dirname + '/src/css',
    debug: true,
  })
);

// The static middleware must come after the sass middleware
app.use(express.static(path.join(__dirname, 'public')));
35
kynan