javascript - mac - node-sass-middleware

node-sass-middleware solo sirve archivo css una vez

Question

He creado un sitio web Express realmente simple que usa Jade y Sass, pero me he encontrado con un problema con mi middleware node-sass. Mi servidor solo sirve un archivo CSS una vez, y luego devuelve un 404 por cada solicitud posterior. Tengo que reiniciar el servidor para repararlo temporalmente. Aquí está mi código; el servidor parece estar bloqueado después de sacar el archivo css (tal vez, no estoy seguro ...)

app.js:

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

var app = express();

app.set(''views'', __dirname + ''/views'');
app.set(''view engine'', ''jade'');

app.use(
    sassMiddleware({
        src: __dirname + ''/public/styles/sass'',
        dest: __dirname + ''/public/styles'',
        debug: true,
        outputStyle: ''compressed'',
        prefix: ''/public/styles''
    }),
    express.static(__dirname + ''/public''),
    express.logger(''dev'')
);

app.get(''/'', function(req, res){
    res.render(''index'', { 
        title: ''Home'' 
    });
});

app.listen(3000);

Aquí está el registro de mi servidor:

source: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/sass/main.scss
dest: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/main.css
read: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/main.css
render: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/sass/main.scss

source: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/sass/main.scss
dest: /Users/jasonzhao/Code/Github/isitjoysbirthday/public/styles/main.css

Las primeras 4 líneas del registro son de mi primera solicitud y las siguientes son de mi segunda solicitud (actualización de la página) que falla.

Y finalmente, aquí está mi plantilla de Jade

doctype
html
  head
    title #{title} - isitjoysbirthday
    link(rel=''stylesheet'', href=''/public/styles/main.css'')
  body
    .container
      .main-content
        block content

¡Gracias!

Answer 1

Me doy cuenta de que esta es una vieja pregunta y puede que ya haya sido respondida hace un tiempo por otros medios, pero veo problemas similares acerca de esto y solo quería responderlo para el registro. Si está publicando la carpeta public , su ruta de archivo debería ser /styles/main.css . Cambie su opción de prefix a just /styles y su HTML a <link href=''/styles/main.css''> .

Aquí hay una configuración de ejemplo de la mía que funciona.

Estructura de directorios:

static
  |
  - css
  |
  - scss

Configuración de Middleware:

  app.use(sassMiddleware({
    src: __dirname + ''/static/scss'',
    dest: __dirname + ''/static/css'',
    debug: false,
    prefix: ''/css'',
    outputStyle: ''compressed''
  }));
  app.use(''/'', serveStatic(''./static'', {}));

HTML:

<link rel=''stylesheet'' href=''/css/app.css''>

Prima:

serveStatic siempre serveStatic esto en /css/my_css_file.css , pero el problema es cómo el middleware interactúa con el enlace HTML. Cada vez que se solicita un archivo estático, mira la ruta de archivo con la que entró y lo pega al final de las URL src y dest . Esto es si no define una opción de prefix en absoluto.

Sin prefix :

Con prefix :

El prefix simplemente ignora la porción /css de mi CSS <link> URL y permite que la ruta absoluta sea precisa para src y dest .

Answer 2

Lo que parece estar causando el problema es

app.use(
    sassMiddleware({
        src: __dirname + ''/public/styles/sass'',
        dest: __dirname + ''/public/styles'',
        debug: true,
        outputStyle: ''compressed'',

        /*you are removing public here (prefix tells the server that what ever
          request for CSS comes, remove ''/public/styles'' from it''s src*/

        prefix: ''/public/styles'' 

    }),
express.static(__dirname + ''/public''),//Now here you are telling it too look
                                      //for all static files in ''public'' it will
                                     // prepend ''/public'' before every static src
express.logger(''dev'')
);

Ejecuciones del servidor de primera vez

La primera vez que el servidor ejecuta CSS no es estático, ya que debe ser transferido a CSS para que se transmita y se sirva sin problemas. Ahora cuando se solicita un archivo, node-sass elimina ''/public/styles'' y lo sirve fácilmente.

En Refresh

Ahora que CSS ha sido transpilado, ahora está estático, por lo que ahora internamente llame a su src como /public/public/styles/main.css que seguramente no existe (intente crear un directorio como este y lo sabrá con certeza)

Solución

la solución a tu código es simple,

app.use(
    sassMiddleware({
        src: __dirname + ''/public/styles/sass'',
        dest: __dirname + ''/public/styles'',
        debug: true,
        outputStyle: ''compressed'',

        prefix: ''/styles'' //remove ''/public'' from here

    }),
express.static(__dirname + ''/public''),
express.logger(''dev'')
);

y Cambiar link src a

link(rel=''stylesheet'', href=''/styles/main.css'')

Espero que esto ayude a muchos otros como yo, solo pasé 4 horas tratando de arreglar esto por mí mismo y aquí estoy. Además, me gustaría sugerir que use serve-static lugar de express.static() , ya que lo probé en serve-static aquí está el código para incluirlo,

//place this where you include node modules
var serveStatic = require(''serve-static'');

//place following code instead of express.static()
app.use(''/'', serveStatic(''./public''));

Espero que esto ayude