@goldhand/sass-dev-server
v1.0.1
Published
a dev server that compile your sass files on demand, no watcher, no configuration required
Downloads
5
Readme
sass-dev-server
is a dev server that compile your sass files on demand, no watcher, no configuration required.
Note: For development only, do not use in production!
Features
- Optional configuration
- Compile sass insanely fast on demand thanks to node-sass
- Enhanced version of
@import
directive:- Glob patterns, e.g
@import "components/*.scss"
- Include css files directly, e.g
@import "css:components/box.css"
- Auto resolve npm packages, e.g
@import "npm:bourbon/app/assets/stylesheets/_bourbon.scss";
- Glob patterns, e.g
- Easy integration with other
express
app and build tools
Installation
npm install -g sass-dev-server
Usage
Usage: sass-dev-server [options]
Options:
-h, --help output usage information
-V, --version output the version number
-p, --port [port] port number that server listen to
-r, --root [root] server's root directory
-g, --get [path] make a GET request to a path
Example
Providing this is your project folder structure
myproject
├── assets
| └── styles
| └── main.scss
- Run
sass-dev-server
insidemyproject
$ myproject> sass-dev-server
> Running sass-dev-server at http://localhost:9000 with root set to "./"
- Add this to your HTML, and you are good to go!
<link rel="stylesheet" type="text/css" href="http://localhost:9000/assets/styles/main.scss">
Additionally, you can add an optional --root
argument
$ myproject> sass-dev-server --root=assets/
> Running sass-dev-server at http://localhost:9000 with root set to "assets/"
That would make the server root to be at myproject/assets
, thus your stylesheet path is shorten (without assets/
)
<link rel="stylesheet" type="text/css" href="http://localhost:9000/styles/main.scss">
Integration
Compiled to css files directly from CLI
sass-dev-server -g assets/styles/main.scss > assets/compiled/main.css
Express app
var Compiler = require('sass-dev-server').Compiler,
Server = require('sass-dev-server').Server,
express = require('express');
// create / setup your own express app
var app = express();
...
// integrate sass-dev-server with your express app
var compiler = new Compiler();
var server = new Server(compiler);
server.use(app);
...
app.listen(3000);
Render out to a file, useful for build tools
var render = require('sass-dev-server').render;
// path is relative to `process.cwd()`, and server root
var file = 'assets/styles/main.scss';
var out = 'assets/compiled/main.css';
render(file, out).then(function(path) {
console.log('rendered to %s', path);
});
Configuration
If you want to customise how server is running and / or how sass
files are compiled, create a sass-dev-server.config.js
in the same folder where you are running sass-dev-server
// sass-dev-server.config.js
module.exports = {
server: {
root: "assets/"
port: 10000,
headers: {
...
}
},
compiler: {
// all node-sass options
...
}
}
Importer
sass-dev-server
comes with a flexible custom importer, there are a few things you can do
- Glob importing
@import "components/*.scss"
- Import css files directly using
css:
prefix
@import "css:components/box.css"
- Import node modules using
npm:
prefix
@import "npm:bourbon/app/assets/stylesheets/_bourbon.scss";
Caveats
- For development use only
- Use your network IP address or
.local
domain if you are on Mac instead oflocalhost
, that will ensure that your stylesheet still working when other machines are viewing the site - The server does nothing with path resolution inside your stylesheet, so make sure if your define
--root
parameter, take into account of other things that being referenced inside the stylesheet file, e.g images, fonts