SCSS to CSS, Create a file watcher in PyCharm

I recently found a way to convert automatically SCSS files to CSS with PyCharm. Today, we will see how to create a file watcher and let it take care of everything.

Compass

Firstly, we need to install compass which will do for us the transpiling.

# For Linux
apt install ruby

gem -v

gem install compass
# For Mac
brew install ruby

# Test if installation ok
gem -v

gem install compass
# if issues, copy these lines to your ~/.bash_profile
export LDFLAGS="-L/usr/local/opt/ruby/lib"
export CPPFLAGS="-I/usr/local/opt/ruby/include"

# and
source ~/.bash_profile

File watcher

Now, let’s create a file watcher which will convert automatically for us SCSS files to CSS files.

Go to Pycharm => Preferences => Tools => File Watchers and click on “+” at the bottom.

# Find compass path for mac
gem list compass -d
/usr/local/lib/ruby/gems/2.7.0/gems/compass-1.0.3/bin
ln -s /usr/local/lib/ruby/gems/2.7.0/gems/compass-1.0.3/bin/compass /usr/local/bin/compass

Install Compass plugin

Go to PyCharm -> Preferences -> Plugins -> Marketplace and then install Compass.

Now, we need to activate the compass support by enabling it from: Preferences -> Stylesheets -> Compass

And now let’s create a watcher by going to Preferences => Tools => File watchers.

I hope it is working well from your side. If you have any questions, feel free to ask in comments.

To know more about me: check my about page.

Sources:

• https://www.jetbrains.com/help/pycharm/transpiling-compass-to-css.html#compassPrerequisites
• https://www.jetbrains.com/help/pycharm/transpiling-compass-to-css.html#compass_compiling_sass_scss
• https://terencelucasyap.com/using-sass-django/
• https://plugins.jetbrains.com/plugin/13705-compass
• https://stackoverflow.com/questions/15806938/how-to-use-compass-in-phpstorm