How to run node-sass options within my Express.js application correctly

Question

I have the following setup in my custom Express application.

I installed node-sass as dependency and is visible from my package.json file like so :

"dependencies": {
  "express": "^4.17.1",
  "node-sass": "^5.0.0",
  "nodemon": "^2.0.7",
  "npm-run-all": "^4.1.5",
  "twig": "^1.15.4"
}

I am running npm run watch to get things going. It's working great:

"scripts": {
  "watch-sass": "node-sass -w src/scss/ -o pub/css/",
  "watch-code": "nodemon --ext js,twig server.js",
  "watch": "npm-run-all --parallel watch-code watch-sass"
},

After reading some of the Options we can use for node-sass from the official source, I thought I could simply place these options within my my server.js file like so, reload the server, and see the adjustments applied to my output file (i.e. pub/css/css_bundle.css).

   const result = sass.renderSync({
     outputStyle: 'compressed', //compressed | nested | expanded | compact
     sourceMap: true, // or an absolute or relative (to outFile) path
   });

...But no matter what happens, (i.e. running my "npm run watch" command), my output file does not compress.

I'm new to this process of managing sass configuration options. What am I missing or not doing correctly in order to manage and connect my node-sass options to my setup (i.e. everything inside of pub/css/)?

klewis · Answer 1 · 2021-02-20T18:46:03.730

I've come to a realization that I have good flexibility with setting options in both my package.json file (while developing the client side) and also in my server.js file (when the server restarts). In my case, I can use the same options in both areas. The following resources led me to this way of thinking for now.

In regards to getting my options working from the server side, the following adjustment to my code has helped me out!


const mscss = path.resolve(__dirname, 'src/scss/', 'css_bundle.scss');
const mcss = path.resolve(__dirname, 'pub/css/', 'css_bundle.css');

sass.renderSync({
    file: mscss,
    outputStyle: 'compact', //compressed | nested | expanded | compact
    outFile: mcss,
    sourceMap: true, // or an absolute or relative (to outFile) path
}, function (err, result) {
    /*...*/
    if (err) throw err;
    console.log('scss render completed');

    fs.writeFile(mcss, result.css, function (err) {
        if (!err) {
            //file written on disk
        }
    });
});

Hopefully this helps someone out there.

How to run node-sass options within my Express.js application correctly

1 Answers1