Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools

Heather Newton
Heather Newton
13,598 Points
Posted by Heather Newton
Heather Newton
13,598 Points

How do I use sass --watch with a WP site on a remote server?

All of the Sass compilation demonstrations I have ever seen are done locally, but our team develops on a remote server to allow us the option of working at the office or from home. I'm having trouble figuring out how to get Sass to compile using this workflow.

I am using the Genesis Sandbox theme which already has all of the files like _variables.scss, _header.scss, etc. set up as imports in a file called style.scss. All of the .scss files are inside a folder called sass, which itself is inside the theme folder.

I have installed Sass and verified the version is 3.3.8 (Maptastic Mapel)

I have attempted using the absolute file path to the style.scss file in the ruby command line like this:

sass --watch http://mywebsite.wpengine.com/wp-content/themes/mytheme/sass/style.scss

At first the command line says sass is watching for changes, but, after a few seconds go by, it gives an error message:

no such file or directory - //mywebsite.com/wp-content/themes/mytheme/sass/style.scss

My next thought was that maybe I needed to actually get an ftp connection set up to the remote server in the command line, then navigate through the file path myself before feeding it the file name I want to watch. I found an instruction for connecting to a remote server using the command:

ftp _ftpservername_

I attempted all of the following commands in the ruby command line to no avail:

ftp _ftp.mywebsite.wpengine.com_
ftp _mywebsite.wpengine.com_
ftp _http://mywebsite.wpengine.com_

I'm still really new to the command line, and FTP set up has always been my bane for some reason, so I've got a couple of strikes against me as I try to figure this out. Am I at least on the right track here?

Thanks in advance!

Update: I believe the problem with FTP commands I have listed above is that they are not specific the the Ruby console. I tried doing a Google search on getting an FTP connection set up in the Ruby console, but the instructions I was able to find just went over my head. I guess I need to find some time to take some of Treehouse's Ruby classes, too. :)

Adam Webster
Adam Webster
24,978 Points
Adam Webster
Adam Webster
24,978 Points

First, you'll need to access your remote server via ssh.

ssh username@mywebsite.wpengine.com

Once you've passed authentication and see that you have remote access to the server, you'll want to make sure you have ruby installed on the remote server and then install the sass gem if it's not already installed.

If your remote server happens to be Ubuntu Linux, you can install ruby with this command.

sudo apt-get install ruby

Once you've confirmed ruby is installed, run this command to install the sass gem.

sudo gem install sass

Once that's done, you can run your regular sass --watch command with a relative path.

sass --watch ~/WPRootFolder/wp-content/themes/mytheme/sass/style.scss

Just remember that you'll only have sass --watch running on the server itself. So, you'll have to also use something like nano or vim to edit your files on the remote server, which may conflict with the --watch command. If this is something that you run into issues with, you may have to use nano or vim to make edits to your styles.scss file, exit the file, run the regular sass compile command, check how things look in the browser, and repeat as needed.