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.

Upidev - Create a file watcher in Pycharm to convert scss to css

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

Upidev - Enabling Compass support in Pycharm

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

Upidev - File watcher SCSS in PyCharm

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:

1+

Laisser un commentaire