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 = Compiler Server = Server express = ; // create / setup your own express appvar app = ; ... // integrate sass-dev-server with your express appvar compiler = ;var server = compiler;server; ... app;
Render out to a file, useful for build tools
var render = render; // path is relative to `process.cwd()`, and server rootvar file = 'assets/styles/main.scss';var out = 'assets/compiled/main.css'; ;
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.jsmoduleexports = 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