How do you install SASS with Express?

后端未结

关注

 4  1973

I am creating a node.js app with Express and socket.io. I want to use SASS and I see there is a npm package for it, what I don\'t understand is how do I link between the SAS

相关标签:

4条回答

陌清茗

2020-12-04 18:58

Here is a solution based on various sources including the threads/comments above:

node:

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

file system:

rootDirectory / server.js (this is the node app)

rootDirectory / public / styles / (this is where the compiled scss files will appear)

rootDirectory / sass / main.scss

This works for me and I've forked the example at:

node-sass-example

here:

node-sass-example using prefix

0 讨论(0)

失恋的感觉

2020-12-04 19:02
If you are using express-generator Then try
```
express --view=ejs --css=sass
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

醉话见心

2020-12-04 19:07

Looks like implementation has changed a bit for Express. I had to do this instead:

npm install node-sass-middleware --save

then

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

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

0 讨论(0)

你的背包

2020-12-04 19:16
You need to use the sass middleware, for example this one.

Quoting from docs:
```
var server = connect.createServer(
   sass.middleware({
       src: __dirname
       , dest: __dirname + '/public'
       , debug: true
    }),
   connect.static(__dirname + '/public')
);
```
in case of using express, just add:
```
 app.use(
     sass.middleware({
         src: __dirname + '/sass', //where the sass files are 
         dest: __dirname + '/public', //where css should go
         debug: true // obvious
     })
 );
```
to your app.configure() call.

Of course on production systems it's a better idea to precompile sass to css.

update

In the example above the middleware will look for sass files in __dirname + '/sass/css'. Also by default it looks for files with .scss extension. There doesn't seem to be an option to change the extension.
0 讨论(0)
发布评论:

提交评论
- 加载中...