Wie installiere Sie SASS mit Express?

Erstelle ich ein node.js app mit Express und socket.io.
Ich will SASS und ich sehe, es ist ein npm-Paket für ihn, was ich nicht verstehe ist, wie kann ich den link zwischen den SASS npm und die app und machen es zu analysieren SASS?

UPDATE:
Ich verwendet, SASS middleware https://github.com/andrew/node-sass installiert es und es auf folgende Weise:

  sass = require('node-sass');


app.configure(function(){
  app.set('port', process.env.PORT || 3000);

  /* other stuff */

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

Aber es funktioniert immer noch nicht

Nicht genau das, was der OP verlangt (also keine Antwort), aber für die Nachwelt, Express bietet einen generator, der durch die express-generator Paket, und Sie können express --css compass und der generator wird automatisch eingerichtet-Express mit Kompass. Ich sehe wenig Gründe für die Verwendung von Sass, aber kein Kompass.

InformationsquelleAutor ilyo | 2013-01-09

24

Müssen Sie sass middleware, zum Beispiel diese eine.

Zitat aus docs:
```
var server = connect.createServer(
   sass.middleware({
       src: __dirname
       , dest: __dirname + '/public'
       , debug: true
    }),
   connect.static(__dirname + '/public')
);
```
im Falle der Verwendung von Ausdrücken, nur hinzufügen:
```
 app.use(
     sass.middleware({
         src: __dirname + '/sass', //where the sass files are 
         dest: __dirname + '/public', //where css should go
         debug: true //obvious
     })
 );
```
Ihrem app.configure() nennen.

Natürlich auf Produktions-Systemen ist es eine bessere Idee, precompile-sass zu css.

update

In dem obigen Beispiel die middleware sucht sass Dateien in __dirname + '/sass/css'. Auch standardmäßig sucht es nach Dateien mit .scss Erweiterung. Es scheint nicht eine option, um die Dateierweiterung ändern.
- danke, wenn ich nicht setzen die sass.middleware innen createServer wo setze ich es?
- innerhalb app.configure call oder überall dort, wo Sie Ihre middleware konfiguriert
- wenn Sie nicht sicher sind, wo es ist, für app.use Anrufe
- wo setze ich die SASS-Datei?
- im Verzeichnis verweist src Eigenschaft in der middleware-Konfiguration (/sass Unterverzeichnis in Ihrem web-app root -)
- Ich verwendet dest: __dirname + '/public/stylesheets/sass', und nichts passiert.. ich bin neu zum Ausdruck zu bringen, so ist es etwas, was ich bin fehlt? Wie weiß ich, dass es sogar versucht, um es zu kompilieren? (und vielen Dank für die Hilfe 🙂
- verwenden, die als src. dest ist, wo die kompilierten css gehen.
- immer noch keine Freude, ich aktualisiert die Frage. Es ist wohl zu kompilieren, die auf Anforderung der Seite, richtig?
- siehe update
- vielen Dank! das bedeutet also, dass ich nur SCSS und SASS nicht?
- ich habe nicht versucht, aber den code anzuschauen und zu wissen, es ist eine Bindung an libsass es ist nur die Erweiterung. Aber es ist am besten, einfach versuchen.
- Ich nur (5 Minuten) per E-Mail die Schöpfer von libsass, und er bestätigt, dass libsass behandelt nicht die eingerückt SASS-syntax. Also, ja, SCSS ist die einzige option zu präsentieren.
- Gibt es eine Möglichkeit, um source nicht Anhängen /css? source eingestellt ist /Users/username/project/public/sass/css/style.scss mit /css angehängt.
- Endlich herausgefunden, wie das geht: Die Grund /css angehängt ist, weil das ist, was Sie verlangen in der html: <link ... href="css/style.css"/>. Dies fordert das css/style.css Datei, der ruft den compiler auf scss/css/style.css. Stattdessen, wenn Sie den link ändern, um <link ... href="style.css">, und ändern Sie die src zu gehören "/css", die Dinge werden alle arbeiten, wie Sie wollen.
- Hm, ich nehme das zurück. Jetzt die SCSS compiler laufen auf die richtige Datei, aber Sie bekommen einen 404, da express-look für style.css im public/style.css statt public/stylesheets/style.css... Nicht sicher, ob es eine einfache Möglichkeit dieses Problem zu beheben.
- aber das wäre nicht wartbar, wenn Sie entfernt sass middleware... keine gute Lösung.
- gibt es einen beträchtlichen Aufwand, um die Verwendung einer middleware für SCSS zu kompilieren kompilieren und via grunt oder anderen tools, die im Voraus? Meine Sorge ist, wenn Express-middleware wird versuchen, zu prüfen, ob es irgendwelche SCSS änderungen auf jeder einzelnen Anforderung.
- das Anhängen von /css-passiert mir auch. Der trick (den ich herausgefunden, indem man die Knoten-sass source-code) enthalten der Präfix-option für Knoten-sass. Präfix wird geschnitten aus der angeforderte Pfad, also zB. mit dem Präfix /css eine Anfrage auf /css/style.css wird "verarbeitet" als /Stil.css. Scheint irrelevant, aber es ist einen Versuch Wert. Zumindest ist es behoben das problem für mich.
- Sass middleware verschoben wurde github.com/sass/node-sass-middleware
InformationsquelleAutor soulcheck
8

Wenn Sie express-generator, Dann versuchen
```
express --view=ejs --css=sass
```
InformationsquelleAutor Devendra Madheshiya

Hier ist eine Lösung, die basierend auf verschiedenen Quellen, einschließlich die threads/Kommentare oben:

Knoten:

var connect = require('connect');
var sass = require('node-sass');

var srcPath = __dirname + '/sass';
var destPath = __dirname + '/public/styles';

var server = connect.createServer(
    sass.middleware({
        src: srcPath,
        dest: destPath,
        debug: true,
        outputStyle: 'expanded',
        prefix: '/styles'
    }),
    connect.static(__dirname + '/public')
);

html:

<!DOCTYPE html>
    <html>
    <head>
         <link rel="stylesheet" type="text/css" href="styles/main.css">
etc

Datei-system:

rootDirectory /server.js (dies ist der Knoten-app)

rootDirectory /public /styles /(dies ist, wo die kompilierte scss Dateien werden angezeigt)

rootDirectory /sass /main.scss

Dies funktioniert für mich und ich habe-Gabel-Beispiel:

Knoten-sass-Beispiel

hier:

Knoten-sass-Beispiel mit Präfix

Pull-request akzeptiert wurde, so dass die Knoten-sass-Beispiel sollte unbedingt meine änderungen jetzt.

InformationsquelleAutor swervo

Sieht wie die Implementierung etwas geändert hat für Express. Ich hatte, dies zu tun, statt:

npm install node-sass-middleware --save

dann

var sass = require('node-sass-middleware');

 app.use(
     sass({
         src: __dirname + '/sass',    //Input SASS files
         dest: __dirname + '/public', //Output CSS
         debug: true                
     })
 );

InformationsquelleAutor Adam Grant

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.