node.js - importer - Obtenga SASS para autocompilar con NodeJS Express y node-sass

node sass node 10

Question

Estoy desarrollando usando node.js, y en lugar de escribir css, me gustaría escribir archivos SCSS que se compilen automáticamente cada vez que actualizo la página.

¿Cómo puedo hacer que los archivos SASS se compilen automáticamente cuando uso NodeJS, Express y node-sass?

Answer 1

Actualización (7 dic 2014)

El middleware de conexión de node-sass se ha extraído en node-sass-middleware , vea esta respuesta

Instalar node-sass

En tu proyecto ejecuta la carpeta:

$ npm install node-sass

Modificar app.js

Asumiendo que has generado tu aplicación usando

$ express my_app

Tu app.js debería verse así:

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''));
});

....

Aquí están las modificaciones:

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'' ) ) );
});

Es importante tener en cuenta que

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

debe venir antes

app.use( express.static ... )

La razón es que primero queremos que Sass compile cualquier archivo Sass que haya cambiado, solo que luego los sirva (lo hace express.static ).

Reinicia tu aplicación

Tendrías que reiniciar tu aplicación para que estos cambios tengan lugar.

Inclúyelo en algún lugar para que compile.

Ahora podemos incluir app.scss en nuestra carpeta /sass . Pero no se compilará todavía. El middleware sass solo compilará los archivos solicitados por sus aplicaciones, por lo que debemos incluir el archivo css (que se procesará) en algún lugar, como en `/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`

Tenga en cuenta que, a diferencia de style.css que se encuentra debajo de la subcarpeta de stylesheets , app.css se lee desde la raíz (en este caso /public ).

Arreglando caminos

Con

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

Después de la primera compilación, la jerarquía de archivos y carpetas se verá así:

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

Es posible que desee tener la salida compilada en la carpeta de stylesheets , en lugar de la public ; al igual que:

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

De esta manera, la vista enlazará a los archivos css así:

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

Sin embargo, si cambia la configuración de middleware sass a

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

Las cosas irán en forma de pera.

Al enlazar al archivo css así:

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

la solicitud resultante será para stylesheets/app.css . Pero ya que le dimos al middleware sass la siguiente configuración:

src: __dirname + ''/sass'',

Irá y buscará /sass/stylesheets/app.scss , y no existe tal archivo.

Una solución es mantener la configuración como está, pero poner todos los archivos sass en la subcarpeta `/ sass / stylesheets /. Pero hay una mejor solución.

Si define una configuración de prefijo así:

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

le dirá al compilador de Sass que el archivo de solicitud siempre tendrá un prefijo con /stylesheets y este prefijo debe ignorarse, por lo tanto, para una solicitud de /stylesheets/app.css , el middleware de sass buscará el archivo /sass/app.scss lugar de que /sass/stylesheets/app.scss .

Código 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

Carpetas y archivos

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

Answer 2

El middleware de conexión de node-sass se ha extraído en node-sass-middleware . Use de la siguiente manera:

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'')));