Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Watch sass with nodejs inside multi level subdirectory

Featured Replies

hello friends,

 

Currently 

 

i hav installed sass using node.js  inside d: directory. And main is folder inside d: directory

and with the command prompt of node i can watch

my scss file for changes and write into css

with this command

sass --watch programming/sass/scss/main.scss   programming/sass/css/main.css 

with this directory structure

dir.thumb.JPG.9ff086b6dc70f85f9f55ddbc93522891.JPG

 

 

now is there any way i can watch changes under  subdir2,subdir3,subdir4,subdir5 with a single command?

 

Edited by sash_oo7

What is the actual Sass module you have installed? node-sass is the most commonly used and what I'd personally use if I was using Sass. https://www.npmjs.com/package/node-sass
I'm not sure why your folder structure is as it is.  It would be confusing to have a Sass folder and then have Sass files outside of it.

  • Author
21 hours ago, rbrtsmith said:

What is the actual Sass module you have installed? node-sass is the most commonly used and what I'd personally use if I was using Sass. https://www.npmjs.com/package/node-sass
I'm not sure why your folder structure is as it is.  It would be confusing to have a Sass folder and then have Sass files outside of it.

i installed sass running this code

npm install -g sass

which is there on https://sass-lang.com/install

 

currently i have no issues compiling scss files 

which is directly under D directory

sass --watch main.scss  main.css 

or inside a folder say programming

sass --watch programming/main.scss   programming/main.css 

or inside another  subfolder scss which is under sass folder inside programming

sass --watch programming/sass/scss/main.scss   programming/sass/css/main.css 

here you can see everytime i need to describe the path to both scss and css file for both input and output

my query is....

Is there any global command that i can run on node js so that i can watch any scss or css files in any subdirectory inside the D;drive (where i installed sass in this case)

 

p.s:i have created the extra sass folder just for my own reference 

Edited by sash_oo7

Looks like that package you are using is Dart Sass which I've never used https://www.npmjs.com/package/sass

I think the point is with Sass is that you have a single entry point - an index file that then imports all the relative sass files explicitly.  So in that index file why don't you link to the other files from there?  Otherwise Sass has no idea of how to order the output CSS.

The only other way around it is to have multiple Sass jobs running which will create multiple CSS files which in your case doesn't look like it will be good for performance so I'd avoid it.  I think you need to re-think how your project is structured.

You normally import any files from a subdirectory into your main Sass file and watch the main file, then any changes in your other files will automatically cause the main file to update.

https://sass-lang.com/documentation/at-rules/use

Since you have installed Sass globally you can change into whichever directory your main file is served from before running the Sass command.

cd programming/sass/scss

sass main.scss --watch

More on using CD and LS here - http://linuxcommand.org/lc3_lts0020.php

Just a quick note on your directory naming too, I would stick to either a sass or scss directory but not both, since they essentially are the same thing.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.