When utilizing the --watch flag, Node-sass will fail to function properly

Question

When utilizing the --watch flag, Node-sass will fail to function properly

Encountering an issue with the "--watch" or "-w" flag when running node-sass. After installing node-sass as a devDependency and setting up a script to compile SCSS code, everything runs smoothly without any flags. However, adding the "--watch" flag causes issues - the initial code doesn't compile and no file changes are detected. Extensive research has yielded no solutions so far. Below are the scripts for reference, and additional information can be provided if needed.

In package.json:

"scripts": {
    "compile:sass": "node-sass sass/main.scss css/style.css"
}

Executing npm run compile:sass successfully compiles the SCSS code:

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5aba4b1aab0b7b685f4ebf5ebf5">[email protected]</a> compile:sass /Users/lucabarcelos/WebstormProjects/AdvancedCSS/Natours
node-sass sass/main.scss css/style.css

Rendering Complete, saving .css file...
Wrote CSS to /Users/lucabarcelos/WebstormProjects/AdvancedCSS/Natours/css/style.css

However, updating the script like this:

"scripts": {
    "compile:sass": "node-sass sass/main.scss css/style.css -w"
}

Results in the following output:

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5dbd4c1dac0c7c6f5849b859b85">[email protected]</a> compile:sass /Users/lucabarcelos/WebstormProjects/AdvancedCSS/Natours
node-sass sass/main.scss css/style.css -w

The process appears to be waiting for file changes, but upon making changes, nothing happens at all.

css node.js sass node-sass

Answer 1

Answer №1

I encountered a similar issue while taking the natours course as well ;-). It seems to be related to the node-sass version.

Try removing node-sass using this command: npm uninstall node-sass --save-dev

Then, install version 4.5.3 by running:

npm install [email protected] --save-dev.

If the problem persists, you can also refer to https://github.com/jonasschmedtmann/advanced-css-course/blob/master/npm-fixes.md

Answer 2

I encountered a similar issue while taking the natours course as well ;-). It seems to be related to the node-sass version.

Try removing node-sass using this command: npm uninstall node-sass --save-dev

Then, install version 4.5.3 by running:

npm install [email protected] --save-dev.

If the problem persists, you can also refer to https://github.com/jonasschmedtmann/advanced-css-course/blob/master/npm-fixes.md

Answer 3

Answer №2

Encountered the same issue (while working on the natours project:)) and found that none of the suggested solutions resolved it for me. I experimented with an onchange file watcher but that didn't work either. For those facing a similar problem with watching .scss files, I decided to share my solution here.

What finally did the trick was using both chokidar and node-sass in combination (node-sass-chokidar). Following the steps outlined in this tutorial, I was able to set it up successfully. The only variations I made were utilizing the -D flag to save it as a devDependency and omitting the -o flag since the output destination file was already in place.

I installed:

npm i node-sass-chokidar -D

followed by

npm i autoprefixer chokidar-cli npm-run-all postcss-cli -D

My scripts

"scripts": {
    "build-task:scss-compile": "node-sass-chokidar --source-map true sass/main.scss  css/style.css",
    "build-task:autoprefixer": "postcss css/*.css --use autoprefixer -d css",
    "sass:build": "npm-run-all -p build-task:*",
    "sass:watch": "chokidar 'sass/**/*.scss' -c 'npm run sass:build'",
    "dev": "npm-run-all -p sass:*"
  }

You can then execute npm run dev or npm run sass:watch.

Answer 4

Encountered the same issue (while working on the natours project:)) and found that none of the suggested solutions resolved it for me. I experimented with an onchange file watcher but that didn't work either. For those facing a similar problem with watching .scss files, I decided to share my solution here.

What finally did the trick was using both chokidar and node-sass in combination (node-sass-chokidar). Following the steps outlined in this tutorial, I was able to set it up successfully. The only variations I made were utilizing the -D flag to save it as a devDependency and omitting the -o flag since the output destination file was already in place.

I installed:

npm i node-sass-chokidar -D

followed by

npm i autoprefixer chokidar-cli npm-run-all postcss-cli -D

My scripts

"scripts": {
    "build-task:scss-compile": "node-sass-chokidar --source-map true sass/main.scss  css/style.css",
    "build-task:autoprefixer": "postcss css/*.css --use autoprefixer -d css",
    "sass:build": "npm-run-all -p build-task:*",
    "sass:watch": "chokidar 'sass/**/*.scss' -c 'npm run sass:build'",
    "dev": "npm-run-all -p sass:*"
  }

You can then execute npm run dev or npm run sass:watch.

Answer 5

Answer №3

Here is how I solved the issue:

First, I installed gaze using npm by running npm install gaze -D
Next, I created a new JavaScript file and used gaze to monitor the sass files for any changes. To execute the desired commands, I utilized the exec method from the child_process library in nodejs.

In order to include this functionality in my project, I added a script to the scripts property in the package.json file.

"sass:compile": "node-sass [your-input-src] [your-output-dest]"

In my watch.js file:

const gaze = require("gaze");
const { exec } = require("child_process");

// Define the command to be executed in the terminal
const COMMAND = "npm run sass:compile";

// Function that takes a command and uses 'exec' to run it in the terminal (shell)
function cmd(command) {
  exec(command, (err, stdout, stderr) => {
    if (err) {
      console.log("error: ", err);
      return;
    }
    if (stderr) {
      console.log("stderr: ", stderr);
      return;
    }
    console.log("stdout: ", stdout);
  });
}

// Setting up gaze to watch for changes in sass files
gaze("sass/*.scss", (err, watcher) => {
  if (err) {
    console.log(err);
    return;
  }

  // List of watched files
  const files = watcher.watched();
  console.log("Watching these files: ", files);
  
  // Gaze emits four events (changed, added, deleted, all). Listen to the ones you want.
  watcher.on("changed", (filePath) => {
    console.log(filePath, "file changed.");
    cmd(COMMAND);
  });

  watcher.on("added", (filePath) => {
    console.log("File: ", filePath, "was added.");
  });

  watcher.on("deleted", (filePath) => {
    console.log(filePath, "was deleted.");
  });

  watcher.on("all", (event, filePath) => {
    console.log("All: ", filePath, " was ", event);
  });
});

For more information on the gaze library, refer to their documentation here: https://github.com/shama/gaze

Answer 6

Here is how I solved the issue:

First, I installed gaze using npm by running npm install gaze -D
Next, I created a new JavaScript file and used gaze to monitor the sass files for any changes. To execute the desired commands, I utilized the exec method from the child_process library in nodejs.

In order to include this functionality in my project, I added a script to the scripts property in the package.json file.

"sass:compile": "node-sass [your-input-src] [your-output-dest]"

In my watch.js file:

const gaze = require("gaze");
const { exec } = require("child_process");

// Define the command to be executed in the terminal
const COMMAND = "npm run sass:compile";

// Function that takes a command and uses 'exec' to run it in the terminal (shell)
function cmd(command) {
  exec(command, (err, stdout, stderr) => {
    if (err) {
      console.log("error: ", err);
      return;
    }
    if (stderr) {
      console.log("stderr: ", stderr);
      return;
    }
    console.log("stdout: ", stdout);
  });
}

// Setting up gaze to watch for changes in sass files
gaze("sass/*.scss", (err, watcher) => {
  if (err) {
    console.log(err);
    return;
  }

  // List of watched files
  const files = watcher.watched();
  console.log("Watching these files: ", files);
  
  // Gaze emits four events (changed, added, deleted, all). Listen to the ones you want.
  watcher.on("changed", (filePath) => {
    console.log(filePath, "file changed.");
    cmd(COMMAND);
  });

  watcher.on("added", (filePath) => {
    console.log("File: ", filePath, "was added.");
  });

  watcher.on("deleted", (filePath) => {
    console.log(filePath, "was deleted.");
  });

  watcher.on("all", (event, filePath) => {
    console.log("All: ", filePath, " was ", event);
  });
});

For more information on the gaze library, refer to their documentation here: https://github.com/shama/gaze

When utilizing the --watch flag, Node-sass will fail to function properly

Answer №1

Answer №2

Answer №3

Similar questions

Issue with NodeJS and MariaDB Connector's createConnection() method not returning the correct connection object

Utilize the nodeclipse extension for enhanced functionality

What steps must be taken to establish a universal connection to MongoDB that can be shared across multiple files?

Incorporating a subdirectory into a module

Completes a form on a separate website which then populates information onto a different website

Dynamically load WordPress content using ajax and incorporate CSS3 animations for added visual appeal

Is it possible to develop my code as an express application while using loopback for scaffolding my application?

Ways to initiate a CSS transition without hovering over it

Having trouble connecting to the online redis database

Progressively increasing the time by 15 seconds during each iteration of the CSS @each loop

Invoke the function once the database information has been retrieved

Unable to delete the margin of Material-ui TextField

Looking for Assistance in Grasping the Concept of ACL in Loopback

Conceal the Standard Select Dropdown Arrow in Internet Explorer 9

Is it possible to add a border to both the tbody and td

Here's how you can combine two individual LESS files using grunt-recess

Can you provide guidance on utilizing the Login Event within the Electron Framework?

The Maven build encountered an error while trying to execute a goal, resulting in the inability to

When accessing req.param on the server side in a Node.js application, it returns undefined

What causes the disparity between Chrome's print preview and printed output? [HTML - CSS]