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