Я разрабатываю с помощью node.js, и вместо написания css хотел бы писать файлы SCSS, которые автоматически компилируются всякий раз, когда я обновляю страницу.
Как я могу получить файлы SASS для автокомпиляции при использовании NodeJS, Express и node -sass.
Соединительное промежуточное программное обеспечение от node-sass было извлечено в node-sass-middleware, см. этот ответ
В папке вашего проекта:
$ npm install node-sass
Предполагая, что вы создали свое приложение, используя
$ express my_app
Ваш app.js должен выглядеть примерно так:
var express = require('express'),
routes = require('./routes');
var app = module.exports = express.createServer();
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
....
Вот изменения:
var express = require('express'),
routes = require('./routes'),
sass = require('node-sass'), // We're adding the node-sass module
path = require('path'); // Also loading the path module
var app = module.exports = express.createServer();
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
// notice that the following line has been removed
// app.use(express.static(__dirname + '/public'));
// adding the sass middleware
app.use(
sass.middleware({
src: __dirname + '/sass',
dest: __dirname + '/public',
debug: true,
})
);
// The static middleware must come after the sass middleware
app.use(express.static( path.join( __dirname, 'public' ) ) );
});
Важно отметить, что
app.use( sass.middleware ... );
должен появиться раньше
app.use( express.static ... )
Причина в том, что мы сначала хотим, чтобы sass скомпилировал любые sass файлы, которые изменились, только затем обслуживайте их (что делается с помощью express.static).
Вам необходимо перезапустить приложение, чтобы эти изменения произошли.
Теперь мы можем включить app.scss в нашу папку /sass. Но пока он не будет компилироваться. Связующее ПО Sass будет только компилировать файлы, которые запрашиваются вашими приложениями, поэтому мы должны где-то включать файл (для отображения) css, например, в `/views/layout.jade ':
doctype html
html(lang="en")
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel="stylesheet", href="app.css") < we've added this
body!= body `/views/layout.jade`
Обратите внимание, что в отличие от style.css, который находится под подпапкой stylesheets, app.css считывается из корня (в этом случае /public).
С
app.use(
sass.middleware({
src: __dirname + '/sass',
dest: __dirname + '/public',
debug: true,
})
);
После первой компиляции иерархия файлов и папок будет выглядеть так:
Project folder
app.js
public
app.css < This is where the compiled file goes
sytlesheets
style.css
sass
app.scss < This is where the sass file is
Вы можете захотеть получить скомпилированный вывод в папке stylesheets, а не в public; так:
Project folder
app.js
public
sytlesheets
app.css
style.css
sass
app.scss
Таким образом, представление будет ссылаться на файлы css следующим образом:
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel="stylesheet", href="/stylesheets/app.css")
Однако, если вы измените конфигурацию промежуточного программного обеспечения sass на
app.use(
sass.middleware({
src: __dirname + '/sass',
dest: __dirname + '/public/stylesheets',
debug: true,
})
);
все будет выглядеть грубой.
При ссылке на файл css, например:
link(rel="stylesheet", href="stylesheets/app.css")
результирующий запрос будет для stylesheets/app.css. Но поскольку мы предоставили связующему средству sass следующую конфигурацию:
src: __dirname + '/sass',
он пойдет и ищет /sass/stylesheets/app.scss, и такой файл не существует.
Одно из решений - сохранить конфигурацию как есть, но поместить все sass файлы в подпапку `/sass/stylesheets/. Но есть лучшее решение.
Если вы определяете конфигурацию префикса следующим образом:
app.use(
sass.middleware({
src: __dirname + '/sass',
dest: __dirname + '/public/stylesheets',
prefix: '/stylesheets', // We've added prefix
})
);
он скажет компилятору sass, что файл запроса всегда будет иметь префикс /stylesheets, и этот префикс должен быть проигнорирован, поэтому для запроса для /stylesheets/app.css связующее ПО sass будет искать файл /sass/app.scss, а не /sass/stylesheets/app.scss.
app.js
var express = require('express'),
routes = require('./routes'),
sass = require('node-sass'),
path = require('path');
var app = module.exports = express.createServer();
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(
sass.middleware({
src: __dirname + '/sass',
dest: __dirname + '/public/stylesheets',
prefix: '/stylesheets',
debug: true,
})
);
app.use(express.static(path.join(__dirname, 'public')));
});
layout.jade
doctype html
html(lang="en")
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel="stylesheet", href="/stylesheets/app.css")
body!= body
Папки и файлы
Project folder
app.js
public
sytlesheets
app.css
style.css
sass
app.scss
Связующее ПО для подключения из node-sass было извлечено в node-sass-middleware. Используйте следующее:
var fs = require('fs'),
path = require('path'),
express = require('express'),
sassMiddleware = require('node-sass-middleware')
var app = module.exports = express();
// adding the sass middleware
app.use(
sassMiddleware({
src: __dirname + '/sass',
dest: __dirname + '/src/css',
debug: true,
})
);
// The static middleware must come after the sass middleware
app.use(express.static(path.join(__dirname, 'public')));