2013-08-07 23 views
6

Sử dụng nút (0.10.15) và tốc độ (3.3.4), cùng với nút sass mới nhất và tôi không thể lấy tệp scss của mình để biên dịch . tập tin app.js của tôi trông như thế này:Nút-sass không tự động biên dịch trong nút/Express mới nhất

var express = require('express') 
    , routes = require('./routes') 
    , user = require('./routes/user') 
    , http = require('http') 
    , path = require('path') 
    , sass = require('node-sass'); 

var app = express(); 

// all environments 
app.set('port', process.env.PORT || 3000); 
app.set('views', __dirname + '/views'); 
app.set('view engine', 'ejs'); 
app.use(express.favicon()); 
app.use(express.logger('dev')); 
app.use(express.bodyParser()); 
app.use(express.methodOverride()); 
app.use(express.cookieParser('your secret here')); 
app.use(express.session()); 
app.use(app.router); 
app.use(express.static(path.join(__dirname, 'public'))); 

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

// development only 
if ('development' == app.get('env')) { 
    app.use(express.errorHandler()); 
} 

app.get('/', routes.index); 
app.get('/users', user.list); 

http.createServer(app).listen(app.get('port'), function(){ 
    console.log('Express server listening on port ' + app.get('port')); 
}); 

Tôi đang thiếu gì để có được sass tự động biên dịch?

Nếu có vấn đề, tôi đang sử dụng người giám sát để giám sát các thay đổi.

+0

Ứng dụng có hoạt động trước đó/với các phiên bản khác không? –

+0

Không. Từ khi tôi chuyển sang bàn làm việc để làm việc này. – bjork24

Trả lời

8

Phần giữa được thực thi theo thứ tự chúng được đính kèm với ứng dụng. Phần mềm trung gian node-sass chỉ biên dịch scss tệp thành css, nó không phục vụ chúng. Tuy nhiên, phần mềm trung gian static có thể phân phát các tệp css được biên dịch, tuy nhiên, nó không thể làm như vậy miễn là các tệp css chưa được biên soạn. Nếu bạn chuyển staticsass middlewares, mọi thứ sẽ hoạt động như mong đợi:

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

app.use(express.static(path.join(__dirname, 'public'))); 

Bây giờ sau sẽ xảy ra khi bạn yêu cầu /style.css:

  1. sass thông báo một yêu cầu cho một tập tin css. Nếu tập tin đích (__dirname + '/public' + '/style.css') được cập nhật, nó sẽ không làm gì cả. Nếu không, nó sẽ tìm tệp src (__dirname + '/public/sass' + '/style.scss') và biên dịch nó, nếu nó tồn tại.
  2. static thông báo yêu cầu về nội dung tĩnh. Nếu tập tin được yêu cầu (path.join(__dirname, 'public') + '/style.css') không tồn tại, nó được phục vụ.
0

Tôi cũng gặp vấn đề nghiêm trọng khi thiết lập điều này với Koa (koa.js) và koa-sass. Cuối cùng tôi đã tìm ra được vấn đề. nút-sass là 'quá thông minh' cho tốt riêng của nó:

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

tôi đã nhận được 500 khi nó cố gắng để truy cập /public/sass/stylesheets/styles.css - nhưng tôi không có 'stylesheets' trong con đường của tôi: My tập tin html mẫu là nhìn vào số /stylesheets/styles.css vì vậy tôi phải xóa tiền tố bằng prefix: '/stylesheets'.

Tiếp theo tôi gặp sự cố với tệp scss - Tôi đã vô tình sao chép tệp .styl cũ và đã cố gắng sử dụng nib - mà tôi đã tìm thấy sau khi phát hiện cài đặt gỡ lỗi: true.

Ngay sau khi tôi thay thế bằng tệp css hoặc scss hợp lệ được biên dịch và hiển thị bằng cách sử dụng koa-static.

Mặc dù đây là một vấn đề koa-sass, koa-sass chỉ kết thúc tốt đẹp nút-sass với một máy phát điện để nó thuộc về đây (IMO).

Các vấn đề liên quan