88

How could I trace changes in whole directory containing many sass files ? I'm using the following command to watch changes in sass

file:

sass --watch style.scss:style.css

But how to watch changes in whole directory/folder containing many sass files.

Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
JA9
  • 1,708
  • 3
  • 14
  • 18

9 Answers9

109

Simply use the command sass --watch <input folder>:<output folder>, like this:

$ ls -l
css/ sass/
$ sass --watch sass:css

Where <input folder> contains the Sass files and <output folder> that hosts the generated CSS files.

piouPiouM
  • 4,937
  • 1
  • 21
  • 22
  • If I have a `sass` folder with 20 sub-directories and with a total of 200 `scss` files inside them, what impact would `sass --watch` have in this case on CPU/Memory resources? – W.M. Jul 03 '16 at 08:30
  • @piouPioum, I have tried the command you have mentioned it detects the change but doesn't write. – Vivek Sep 22 '16 at 09:38
  • It says **Could not find an option named "watch".**. I don't know what to do, I can't believe I can't run a watcher without install external programs or use a task runner – Christian Vincenzo Traina Aug 21 '17 at 12:40
30

Expanding the answer by piouPiouM a little:

  • Output files will be created with the same names as input files except ending with .css.
  • <input folder> and <output folder> can be the same.

  • Both folders can be the present working directory, so the following is valid:

    $ sass --watch .:.

Gary Robertson
  • 494
  • 4
  • 5
16

Go to you terminal and get to you folder then wrote:

 sass --watch .

this will watch all sass files and convert to css files with the same name. also you can do it in this way:

sass --watch ~/user/youUser/workspace/project/styles/

I hope this can help you.

davthecoder
  • 689
  • 1
  • 6
  • 20
9

I ended up doing this without using Grunt or Sass-watch:

npm install -g watch
watch "sass assets/app.scss assets/dist/app.css" assets/css
matsko
  • 21,895
  • 21
  • 102
  • 144
  • 1
    Do you install sass in your working web directory? If its installed at the system level do I have to type the whole path? So... `sass --watch /Users/estout/Documents/GIT/project/:/Users/estout/Documents/GIT/project/` – erwstout Apr 02 '15 at 04:30
  • @buschschwick: Yes, you install it at system level. You either type the full address each time, like you have, or a little easier would be to change directory `cd /Users/estout/Documents/GIT/project/` and then write `$ sass --watch .:.` – TheCarver Jun 23 '15 at 10:27
6

if you are in your current folder then do the following to watch it.

F:\sass tutorial>sass --watch ./:./
ADM
  • 20,406
  • 11
  • 52
  • 83
saransh mehra
  • 157
  • 2
  • 9
4

Just in case someone faces with this issue in 2018:
sass Website refers to Ruby Sass that is been deprecated. and as now (May 2018) if you install dart sass via npm , it does not support --watch command

What to do:
you need to install node-sass globaly , like:

npm install node-sass -g

and then restart the command line , then use this code:

node-sass --watch scss/styles.scss css/styles.css

to compile your scass files to css.
basically node-sass supports --watch command and we use that to compile our scss codes to regular css files.

and just in case you get an error like this at the first time that you save your .scss file: 

{
  "status": 3,
  "message": "File to read not found or unreadable: yourdirectory/scss/styles.scss",
  "formatted": "Internal Error: File to read not found or unreadable: yourdirectory/scss/styles.scss\n"
}

what you need to do is save it again, it will work correctly!

amdev
  • 6,703
  • 6
  • 42
  • 64
  • Though of course now [node sass is deprecated](https://stackoverflow.com/questions/65594119/node-sass-usage-is-deprecated-and-will-be-removed-in-a-future-major-version). I don't see anything equivalent to `watch` on [the npm page](https://www.npmjs.com/package/dart-sass). It is [on the stand-alone version](https://sass-lang.com/documentation/cli/dart-sass#watch), but not 100% sure how to use in node code yet, as, eg, there's [no watch on its DefinitelyTyped definition](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/f7ec78508c6797e42f87a4390735bc2c650a1bfd/types/sass/index.d.ts#L14). – ruffin Jun 01 '21 at 23:22
3

According to the information, you can use the next command line:

sass --watch .

Source: http://sassbreak.com/watch-your-sass/#what-does---watch-do

Moises Portillo
  • 828
  • 8
  • 12
3

You can set sass to watch all the .scss files(for my case i got several .scss files in src/static folder) to compile, but before install it globally:

npm i -g sass

then go to the project folder and type command below:

sass --watch $(pwd)/src/static

also you can wrap it in npm script in package.json, like

 "scripts": {
    "sass:watch": "sass --watch $(pwd)/src/static"
    }

and run it by this command:

npm run sass:watch
Artem Fedotov
  • 432
  • 1
  • 6
  • 21
2

You can create one sass file which includes the rest of the files, and then just watch this file.

Alternately, look into Grunt and the very good grunt-contrib-compass plugin

kumarharsh
  • 18,961
  • 8
  • 72
  • 100
  • @matsko yes, that is indeed what the `grunt watch` does – kumarharsh Oct 31 '14 at 05:45
  • I ended up doing this: https://stackoverflow.com/questions/18427849/how-to-watch-changes-in-whole-directory-folder-containing-many-sass-files/26675999#26675999 – matsko Oct 31 '14 at 13:35
  • You would not want one SASS file for my current project. This is a poor suggestion/answer. Much simpler is to ask SASS to watch a directory, which others have stated in their answers. – TheCarver Jun 23 '15 at 10:23
  • 2
    You *may* want one master SASS file for the project, which includes all the child component SASS files (look at how bootstrap does it). There is also a major pitfall with the current accepted answer that it compiles **all** sass files and outputs one css file for each sass file (partials excluded). That *may* not be what you want. – kumarharsh Jun 23 '15 at 13:22