An express middleware to automatically convert requested SASS files into CSS routes on the fly, with production caching
npm install @darius2652/sass-middlewareNODE_ENV=development
NODE_ENV=production
js
// --- Standard Express setup ---
const express = require('expess');
const app = require('app');
// --- The important bits ---
const sassMiddleware = require('@darius2652/sass-middleware')({
// optional parameters, found below
});
app.use(sassMiddleware.Hook);
// Initialize sass-middleware before you add any routes or
`
$3
In your /sass or /scss directory, create a respective .sass or .scss file.
For this example I went with /sass/my-file.sass.
In the HEAD section of your website, you can now link to this file with two methods, depending on your desired output:
`html
`
$3
| Parameter | Use |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| source | The folder where .sass or .scss files will be located. Defaults to /sass or /scss in your root directory |
| variableMap | A JSON object containing key-value pairs which will be passed to the SASS compiler. Automatically prepended with $.
Use !default to initialize values in the sass/scss files. |
| forceMinifed | Always return minified CSS, regardless of wheter .min was added to the URL |
| mode | Select between sass or scss. This will change the default source folder, the syntax used and the file extension the compiler searches for |
| exposePartials | Whether to allow directly linking to files that have an underscore "\_" in front of the file name (normally used for partial files) |
| debug | One of three methods which can be called from within a sass or scss file, for debugging purposes. |
| warn | One of three methods which can be called from within a sass or scss file, for debugging purposes. |
| error | One of three methods which can be called from within a sass or scss file, for debugging purposes. |
$3
In the example file, I have added the following variables to the variableMap parameter:
`json
{
"color-background": "#444",
"color-primary": "#00AAFF",
"header-size": "3em",
}
`
Using these variables (as can be seen in the example file my-file.sass), this is the output:
!Variables Example Image
$3
Flush Cache
In production, it might be necessary to flush the cache of your SASS files without reloading the server. This will be necessary if your variableMap values change at any point.
Cache can be flushed for all generated SASS files,
Flushing can be called in two ways:
- SassMiddleware.Flush()
- In an express route, req.flushSass()
$3
`sh
npm i -s @darius2652/sass-middleware
``